The app.js file serves as the entrypoint for Inertia.js applications using Vue 3. It uses createInertiaApp to initialize the application, resolve page components, and set up global plugins like ZiggyVue.
Key configuration options include:
title: A function to define the document title format. It receives the page title and can append an application name.resolve: A function to resolve page components. In this stub, it uses resolvePageComponent to dynamically import Vue files from the ./Pages/ directory.setup: A function that receives the application instance components (el, App, props, plugin) and is responsible for mounting the Vue application and registering plugins.progress: Configuration for the Inertia progress bar, such as the color.
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)
.mount(el);
},
progress: {
color: '#4B5563',
},
});
