initial import

resources/js/app.js

@@ -0,0 +1,36 @@
+import './bootstrap';
+import '../css/app.css';
+
+import { createApp, h } from 'vue';
+import { createInertiaApp } from '@inertiajs/vue3';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { ZiggyVue } from '../../vendor/tightenco/ziggy';
+
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
+createInertiaApp({
+    title: (title) => `${title} - ${appName}`,
+    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
+    setup({ el, App, props, plugin }) {
+        return createApp({ render: () => h(App, props) })
+            .use(plugin)
+            .use(ZiggyVue)
+            .mixin({
+                methods: {
+                    __: (key, replace = {}) => {
+                        let translation = props.initialPage.props.translations[key] || key;
+
+                        for (let placeholder in replace) {
+                            translation = translation.replace(`:${placeholder}`, replace[placeholder]);
+                        }
+
+                        return translation;
+                    },
+                },
+            })
+            .mount(el);
+    },
+    progress: {
+        color: '#4B5563',
+    },
+});