Enable the Vue 3 front-end

resources/js/app.js

@@ -1,65 +1,95 @@
-import Vue              from 'vue'
-import mixins           from './mixins'
-import VueStorage       from './packages/vue-storage'
-import i18n             from './langs/i18n'
-import router           from './routes'
-import api              from './api'
-import FontAwesome      from './packages/fontawesome'
-import Clipboard        from './packages/clipboard'
-import Notifications    from 'vue-notification'
+import '/resources/js/assets/app.scss'; 
 
-import './components'
+import Notifications from '@kyvg/vue3-notification'
+import App from './App.vue'
+import router from './router'
+import FontAwesomeIcon from './icons'
+// import helpers from './helpers'
 
-Vue.use(Notifications)
+const app = createApp(App)
 
-const app = new Vue({
-    el: '#app',
-    data: {
-        appSettings: window.appSettings,
-        appConfig: window.appConfig,
-        userPreferences: window.userPreferences,
-        isDemoApp: window.isDemoApp,
-        isTestingApp: window.isTestingApp,
-        prefersDarkScheme: window.matchMedia('(prefers-color-scheme: dark)').matches,
-        spinner: {
-            active: false,
-            message: 'loading'
-        },
-    },
+// Immutable app properties provided by the laravel blade view
+const $2fauth = {
+    prefix: '2fauth_',
+    config: window.appConfig,
+    version: window.appVersion,
+    isDemoApp: window.isDemoApp,
+    isTestingApp: window.isTestingApp,
+    langs: window.appLocales,
+}
+app.provide('2fauth', readonly($2fauth))
 
-    computed: {
-        showDarkMode: function() {
-            return this.userPreferences.theme == 'dark' ||
-                (this.userPreferences.theme == 'system' && this.prefersDarkScheme)
-        }
-    },
-
-    mounted () {
-        this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')
-        this.$nextTick(() => {
-            this.mediaQueryList.addEventListener('change', this.setDarkScheme)
-        })
-    },
-
-    beforeDestroy () {
-        this.mediaQueryList.removeEventListener('change', this.setDarkScheme)
-    },
-
-    methods: {
-        setDarkScheme ({ matches }) {
-            this.prefersDarkScheme = matches
-        },
-
-        showSpinner(message) {
-            this.spinner.message = message;
-            this.spinner.active = true;
-        },
-
-        hideSpinner() {
-            this.spinner.active = false;
-            this.spinner.message = 'loading';
-        }
-    },
-    i18n,
-    router,
+// Stores
+const pinia = createPinia()
+pinia.use(({ store }) => {
+    store.$2fauth = $2fauth;
 });
+app.use(pinia)
+
+// Router
+app.use(router)
+
+// Localization
+app.use(i18nVue, {
+    lang: document.documentElement.lang.substring(0, 2),
+    resolve: async lang => {
+        const langs = import.meta.glob('../lang/*.json');
+        if (lang.includes('php_')) {
+            return await langs[`../lang/${lang}.json`]();
+        }
+    }
+})
+
+// Notifications
+app.use(Notifications)
+
+// Global components registration
+import ResponsiveWidthWrapper from '@/layouts/ResponsiveWidthWrapper.vue'
+import FormWrapper from '@/layouts/FormWrapper.vue'
+import Footer from '@/layouts/Footer.vue'
+import Modal from '@/layouts/Modal.vue'
+import VueButton           from '@/components/formElements/Button.vue'
+import ButtonBackCloseCancel from '@/components/formElements/ButtonBackCloseCancel.vue'
+import FieldError       from '@/components/formElements/FieldError.vue'
+import FormField        from '@/components/formElements/FormField.vue'
+import FormPasswordField        from '@/components/formElements/FormPasswordField.vue'
+import FormSelect       from '@/components/formElements/FormSelect.vue'
+import FormToggle       from '@/components/formElements/FormToggle.vue'
+import FormCheckbox     from '@/components/formElements/FormCheckbox.vue'
+import FormButtons      from '@/components/formElements/FormButtons.vue'
+import Kicker           from '@/components/Kicker.vue'
+
+app
+    .component('FontAwesomeIcon', FontAwesomeIcon)
+    .component('ResponsiveWidthWrapper', ResponsiveWidthWrapper)
+    .component('FormWrapper', FormWrapper)
+    .component('VueFooter', Footer)
+    .component('Modal', Modal)
+    .component('VueButton', VueButton)
+    .component('ButtonBackCloseCancel', ButtonBackCloseCancel)
+    .component('FieldError', FieldError)
+    .component('FormField', FormField)
+    .component('FormPasswordField', FormPasswordField)
+    .component('FormSelect', FormSelect)
+    .component('FormToggle', FormToggle)
+    .component('FormCheckbox', FormCheckbox)
+    .component('FormButtons', FormButtons)
+    .component('Kicker', Kicker)
+
+// Global error handling
+// import { useNotifyStore } from '@/stores/notify'
+// if (process.env.NODE_ENV != 'development') {
+//     app.config.errorHandler = (err) => {
+//         useNotifyStore().error(err)
+//     }
+// }
+
+// Helpers
+// app.config.globalProperties.$helpers = helpers
+
+// App mounting
+app.mount('#app')
+
+// Theme
+import { useUserStore } from '@/stores/user'
+useUserStore().applyUserPrefs()