I am using the latest version of Laravel + Vite + InertiaJS + Vue 3 + Vuetify. I installed vuetify in my project using this code npm i vuetify@^3.3.7 and added this block of codes in my app.js file.
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
const vuetify = createVuetify({
components,
directives,
});
createInertiaApp({
resolve: (name) => {
const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
return pages[`./Pages/${name}.vue`];
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.use(vuetify)
.mount(el);
},
});
I also installed a plugin called vite-plugin-vuetify and modified my vite.config.js file to look like this:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
import vuetify from "vite-plugin-vuetify";
export default defineConfig({
plugins: [
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
vuetify({ autoImport: true }),
laravel({
input: ["resources/css/app.css", "resources/js/app.js"],
refresh: true,
}),
],
});
I do not have a /plugins/vuetify.js because vuetify components already work well in my project. However, my only problem is that.. it loads all the vuetify components even if i didn't use them which cause a very slow load of my project during first load.
I wish I could include links of my project's network tab here but laracast doesn't allow it.
So my question is
how to manually import specific components that I am only going to use in my vue files?