Vuetify Inertia Link

This is a simple Vue plugin that enables the use of Inertia links with Vuetify components.

It adds support for the Inertia route() helper function within the "to" prop of Vuetify components.

Installation

bash

npm install vuetify-inertia-link

javascript

import VuetifyInertiaLink from 'vuetify-inertia-link';



app.use(VuetifyInertiaLink);





Example app.js

javascript

import { createApp, h } from 'vue';

import { createInertiaApp } from '@inertiajs/vue3';

import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';



import { createVuetify } from 'vuetify'

import VuetifyInertiaLink from "vuetify-inertia-link";



const vuetify = createVuetify({

    components,

    directives,

})

createInertiaApp({

    title: (title) =>

${title}

,

    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)

            .use(vuetify)

            .use(VuetifyInertiaLink)

            .mount(el);

    },

});







Usage

html





or as a menu:

html

``

Thank you to https://github.com/robjuz for the original idea and implementation posted on a github issue.
https://github.com/vuetifyjs/vuetify/issues/11573#issuecomment-1465046711