Vuetify Plugin

IMPORTANT

Only compatible with Vuetify >= 3

What it does

This package provides a plugin for projects using Vuetify 3 that integrates you routes with Vuetify components' :to prop.

<template>
  <v-btn to="pages.about-us">About Us</v-btn>
</template>

or if you need to pass route parameters, send a tuple instead:

<template>
  <v-btn
    :to="[
		'pages.case-studies', 
		{ study: 42 }
	]"
  >
    Read this Case Study
  </v-btn>
</template>

Inertia link props support

All router-enabled components in Vuetify also support any Link props from InertiaJS:

<template>
	<v-btn
		prefetch
		cache-for="20s"
		:to="[
			'pages.testimonials',
			{ company: "acme-inc" }
		]"
	> Read Acme Inc's Review </v-btn>
</template>

Installing the plugin

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import { inertiaRoutes, vuetifyRoutesPlugin } from "@adminui/inertia-routes";
import { createVuetify } from "vuetify";

const vuetify = createVuetify();

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
    return pages[`./Pages/${name}.vue`];
  },
  withApp((app) {
    app.use(vuetify)
      .use(inertiaRoutes)
      .use(vuetifyRoutesPlugin);
  }),
});

Config

By default, the plugin suppresses hydration mismatch errors on the class attribute, you can disable the functionality by passing a config object to app.use:

createInertiaApp({
  withApp((app) {
    app.use(vuetify)
      .use(inertiaRoutes)
      .use(vuetifyRoutesPlugin, { flagMismatches: true });
  }),
})