fix component names

resources/js/app.js

@@ -13,6 +13,11 @@ import AppLayout from './layouts/AppLayout.vue';
 import hasModule from './mixins/hasModule.js';
 import hasFlash from './mixins/hasFlash.js';
 
+import '../css/app.css';
+
+// ---------------------------------- Assets -----------------------------------
+import.meta.glob(['../img/**']);
+
 // ---------------------------------- Plugins ----------------------------------
 Vue.use(plugin);
 Vue.use(PortalVue);
@@ -25,9 +30,9 @@ Vue.component('SvgSprite', () => import('./components/SvgSprite.js'));
 Vue.component('ILink', ILink);
 
 // -------------------------------- Components ---------------------------------
-requireModules(require.context('./components/form', false, /\.vue$/, 'lazy'), Vue, 'f');
+requireModules(import.meta.glob('./components/form/*.vue'), Vue, 'f');
-requireModules(require.context('./components/ui', false, /\.vue$/, 'lazy'), Vue, 'ui');
+requireModules(import.meta.glob('./components/ui/*.vue'), Vue, 'ui');
-requireModules(require.context('./components/page', false, /\.vue$/), Vue, 'page');
+requireModules(import.meta.glob('./components/page/*.vue', {eager: true}), Vue, 'page');
 
 // ---------------------------------- mixins -----------------------------------
 Vue.mixin(hasModule);
@@ -39,6 +44,7 @@ const pinia = createPinia();
 
 Inertia.on('start', (event) => window.dispatchEvent(new Event('inertiaStart')));
 
+let views = import.meta.glob('./views/**/*.vue');
 new Vue({
     pinia,
     render: (h) =>
@@ -46,7 +52,7 @@ new Vue({
             props: {
                 initialPage: JSON.parse(el.dataset.page),
                 resolveComponent: async (name) => {
-                    var page = (await import(`./views/${name}`)).default;
+                    var page = (await views[`./views/${name}.vue`]()).default;
 
                     if (page.layout === undefined) {
                         page.layout = AppLayout;

resources/js/lib/requireModules.js

@@ -1,11 +1,9 @@
 import {paramCase} from 'change-case';
 
 export default function (context, Vue, prefix) {
-    var isAsync = context.name === 'webpackAsyncContext';
+    for (const file in context) {
+        let componentName = paramCase(`${prefix}${file.replace(/^.*\/(.*?)\.vue$/g, '$1')}`);
 
-    context.keys().forEach((file) => {
+        Vue.component(componentName, typeof context[file] === 'function' ? context[file] : context[file].default);
-        let componentName = paramCase(`${prefix}${file.replace(/^\.\/(.*?)\.vue$/g, '$1')}`);
+    }
-
-        Vue.component(componentName, isAsync ? () => context(file) : context(file).default);
-    });
 }

resources/js/views/VLogin.vue

@@ -2,7 +2,7 @@
     <form @submit.prevent="submit">
         <div class="h-24 p-6 md:px-10 bg-primary-800 flex justify-between items-center w-full">
             <span class="text-primary-500 text-xl">Login</span>
-            <img src="/img/dpsg.gif" class="w-24" />
+            <img src="../../img/dpsg.gif" class="w-24" />
         </div>
         <div class="p-6 md:p-10 grid gap-5">
             <f-text id="email" label="E-Mail-Adresse" v-model="values.email"></f-text>
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import FullLayout from '../layouts/FullLayout';
+import FullLayout from '../layouts/FullLayout.vue';
 
 export default {
     layout: FullLayout,

resources/js/views/dashboard/VIndex.vue

@@ -16,7 +16,7 @@ export default {
     },
 
     components: {
-        'VBlock': () => import('./VBlock'),
+        'VBlock': () => import('./VBlock.vue'),
         'age-group-count': () => import('./AgeGroupCount.vue'),
         'efz-pending': () => import('./EfzPending.vue'),
         'ps-pending': () => import('./PsPending.vue'),

resources/js/views/member/ShowView.vue

@@ -95,15 +95,15 @@ export default {
     },
 
     components: {
-        stamm: () => import(/* webpackChunkName: "member" */ './boxes/Stamm'),
+        stamm: () => import(/* webpackChunkName: "member" */ './boxes/Stamm.vue'),
-        kontakt: () => import(/* webpackChunkName: "member" */ './boxes/Kontakt'),
+        kontakt: () => import(/* webpackChunkName: "member" */ './boxes/Kontakt.vue'),
-        prae: () => import(/* webpackChunkName: "member" */ './boxes/Prae'),
+        prae: () => import(/* webpackChunkName: "member" */ './boxes/Prae.vue'),
-        courses: () => import(/* webpackChunkName: "member" */ './boxes/Courses'),
+        courses: () => import(/* webpackChunkName: "member" */ './boxes/Courses.vue'),
-        system: () => import(/* webpackChunkName: "member" */ './boxes/System'),
+        system: () => import(/* webpackChunkName: "member" */ './boxes/System.vue'),
-        payments: () => import(/* webpackChunkName: "member" */ './boxes/Payments'),
+        payments: () => import(/* webpackChunkName: "member" */ './boxes/Payments.vue'),
-        memberships: () => import(/* webpackChunkName: "member" */ './boxes/Memberships'),
+        memberships: () => import(/* webpackChunkName: "member" */ './boxes/Memberships.vue'),
-        vmap: () => import(/* webpackChunkName: "member" */ './boxes/Vmap'),
+        vmap: () => import(/* webpackChunkName: "member" */ './boxes/Vmap.vue'),
-        tabs: () => import(/* webpackChunkName: "member" */ './Tabs'),
+        tabs: () => import(/* webpackChunkName: "member" */ './Tabs.vue'),
     },
 
     created() {

resources/js/views/member/VIndex.vue

@@ -153,9 +153,9 @@ export default {
         MemberMemberships,
         MemberPayments,
         MemberCourses,
-        'age-groups': () => import(/* webpackChunkName: "member" */ './AgeGroups'),
+        'age-groups': () => import('./AgeGroups.vue'),
-        'tags': () => import(/* webpackChunkName: "member" */ './Tags'),
+        'tags': () => import('./Tags.vue'),
-        'actions': () => import(/* webpackChunkName: "member" */ './index/Actions'),
+        'actions': () => import('./index/Actions.vue'),
     },
 
     methods: {