It is my first time doing a project using Laravel breeze (Laravel10/Vue3/inertia.js). I have done the back-end and front-end set-up and everything looks good till then. However, I installed Vuetify3.5 and been trying to set it up to work with vue, but vuetify components won’t just load. Here is my vuetify.js file;
import "vuetify/styles"
import { createVuetify } from "vuetify"
import * as components from "vuetify/components"
import * as directives from "vuetify/directives"
const customeTheme = {
colors: {
primary: "#673ab7",
secondary: "#424242",
}
}
const vuetify = createVuetify({
components,
directives,
theme: {
defaultTheme: "customeTheme",
themes: {
customeTheme
}
}
})
export default vuetify;
and then i imported this file into my app.js file;
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
//imported vuetify here
import vuetify from "./vuetify"
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
//instantiated vuetify in my vue/inertia app
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), vuetify })
.use(plugin)
.use(ZiggyVue)
.use(vuetify)
.mount(el);
},
progress: {
color: '#4B5563',
},
});
From my experience using Laravel/Vue2 with Vuetify, we add <v-app>
as a wrapper in our root App.vue file but Laravel breeze/inertia does not structure that way. Do i have to create some root file and add the <v-app>
wrapper or what am i doing wrong?