How to add Vue Components Globally in an InertiaJS application.

If you are using Laravel or Ruby on Rails, you may have heard of Inertia.js. Inertia makes it easy to build single page applications utilizing your existing Ruby on Rails or Laravel backend for routing and actions.

For an application I'm building now, I'm using Laravel Jetstream, with Inertia Vue as the frontend. One thing that quickly frustrated me was importing components I needed over and over again. I wanted to import the main components that I used most often to make my pages and components easier to read and maintain.

In the Vue docs, it shows how to import Vue components globally for normal Vue applications, and the way to do this is exactly the same in Inertia. Inertia does not have any documentation(yet) showing how to import components globally.

In your app.js file in your resources folder, you need to import the component as you normally would, then configure your component(s) before mounting the Vue instance.

For me, this looked like this:

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

import money from './utils/money'; // This is a normal mixin that includes a method for formatting money.

// These are a few of the components that I wanted to import globally: 
import JetLabel from "@/Jetstream/Label";
import JetInput from "@/Jetstream/Input";
import JetSectionTitle from "@/Jetstream/SectionTitle";
import JetButton from "@/Jetstream/Button";
import SelectBox from "@Components/Forms/SelectBox";


const el = document.getElementById('app');


// I created a variable for the app. With Jetstream, you need to add this
const app = createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
});
    
app.mixin({ methods: { route } })
    .mixin(money)
    .use(InertiaPlugin);

// Here, I have added the components to be imported globally to the mixin object declaration
app.component('jet-label', JetLabel);
app.component('jet-input', JetInput);
app.component('jet-section-title', JetSectionTitle);
app.component('jet-button', JetButton);
app.component('select-box', SelectBox);

app.mount(el);

InertiaProgress.init({ delay: 250, color: '#29d', showSpinner: true, includeCSS: false });

Now, anywhere I need to use these components in the app, they are available to use. They do not need to be imported or declared within the component!

Another way to import components globally

You can also import your components in the mixin registration like this:

app.mixin({ 
        methods: { route }, 
        components: {JetLabel, JetInput, JetButton // etc} })