example-code/php-laravel/js/main.js

import RegisterArea from './register-area/register-area.vue'
import Panel from './panel/panel.vue'
import '../scss/main.scss'
import { createApp } from 'vue'
importAll(require.context('../images', false, /\.(png|jpe?g|svg)$/))

let heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p")
let registerToggles = document.querySelectorAll(".register-btn, .register-area\
	.cancel-button, .services-cards button")
let token = getCookie('XSRF-TOKEN')

function importAll(r) {
	return r.keys().map(r)
}

function getCookie(name) {
  var re = new RegExp(name + "=([^;]+)")
  var value = re.exec(document.cookie)

  return (value != null) ? unescape(value[1]) : null
}

function getToken() {
	return fetch("/sanctum/csrf-cookie", {
		method: 'GET'
	}).then( () => {
		token = getCookie('XSRF-TOKEN')
		return token
	})
}

function login(event) {
	getToken().then(fetch("/login", {
		method: 'POST',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': token},
		body: JSON.stringify({"email":
			document.getElementById("login_email").value,
		"password": document.getElementById("login_password").value}),
	}).then(response => {
		if (response.ok) {
			window.location.assign("/panel")
		} else {
			document.querySelector("#login_form .error").innerText =
				"Invalid credentials."
		}
	}))
	event.preventDefault()
	// event.stopPropogation()
}


//Attempt to resend the verification link
function resendLink(event) {
	fetch("/resend-verification", {
		method: 'POST',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': token},
	}).then(response => {
		if (response.ok) {
			event.target.parentNode.getElementsByTagName('h3')[0].innerText =
			"The link has been resent."
		} else {
			event.target.parentNode.getElementsByTagName('h3')[0].innerText =
			`${response.status} : ${response.statusText}`
		}})
	event.preventDefault();
}

function toggleNav() {
	heroText.forEach(item => {
		item.classList.toggle("hidden")
	})
	document.querySelector("nav form.login").classList.toggle("active")
	this.classList.toggle("toggled")
}


if (window.location.pathname == '/') {
	document.getElementById('nav_toggle').addEventListener('click', toggleNav)
	document.querySelector('#login_form button').addEventListener('click', login)
	const app = createApp(RegisterArea).mount('#app')
	// app.token = token
	if (!token) {app.token = getToken()}

	//Triggers for registration menu
	for (let i = 0; i < registerToggles.length; i++) {
		registerToggles[i].addEventListener("click", function() {
		document.querySelector(".register-area").classList.add("active")
		app.active = 'register'
		})
	}
	document.getElementById("forgot-password-btn").onclick = event => {
		document.querySelector(".register-area").classList.add("active")
		app.active = 'forgot'
		event.preventDefault()
	}

	//FAQ collapsibles
	let cols = document.getElementsByClassName("collapsible");

	for (let i = 0; i < cols.length; i++) {
		cols[i].addEventListener("click", function() {
			this.classList.toggle("active");
		});
	}
} else if (window.location.pathname == '/verify-email') {
	document.getElementById('resend_verification').addEventListener("click", resendLink)
} else if (window.location.pathname == '/panel') {
	const app = createApp(Panel).mount('#panel')
	getToken().then(()=> {app.token = token})
	window.onhashchange = ()=>{app.active = location.hash}
}