Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

cytisay's avatar

How to import only needed components in vuetify?

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?

0 likes
1 reply
DioneMorrison's avatar

I can see your concern

Install Vuetify: Make sure you have Vuetify installed in your project. You can install it using a package manager like npm or yarn. For example, using npm: Copy code npm install vuetify https://www.tellhappystar.org/ Import Specific Components: In your Vue component file, you can import only the required Vuetify components. For example, if you only need the Vuetify button component, you can import it as follows: vueCopy code Button

Register Components: To use the imported component, you need to register it with Vue. In the example above, Vue.use(VBtn) registers the button component globally for the entire Vue application. Note: It's important to use the /lib directory in the import path to access the modularized components of Verify

Please or to participate in this conversation.