How can i use Vuetify3 in Nuxt3

[shahriar350]

What is the procedure to use Vuetify 3 in Nuxt3?

[jacekkarczmarczyk]

See https://codybontecou.com/how-to-use-vuetify-with-nuxt-3.html (not sure if that's ok as I don't use Nuxt myself, but looks good at first glance)

[shahriar350]

yarn add -D @mdi/font vuetify@^3.0.0

plugins/vuetify.js

import '@mdi/font/css/materialdesignicons.css'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/styles'
import {createVuetify} from 'vuetify'

const vuetify = createVuetify({
    components,
    directives,
    ssr: true,
    icons: {
        defaultSet: 'mdi', // This is already the default value - only for display purposes
    },
    theme: {
        themes: {
            light: {
                colors: {
                    primary: '#1867C0',
                    secondary: '#5CBBF6',
                },
            },
        },
    },
})

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(vuetify)
});

nuxt.config.ts

export default defineNuxtConfig({
    build: {
        transpile: ['vuetify'],
    },
})

[codeflorist]

this imports all directives and components, making the app much larger than needed. so one might better use treeshaking using vite-plugin-vuetify as described here:
https://next.vuetifyjs.com/en/features/treeshaking/

[shahriar350]

this imports all directives and components, making the app much larger than needed. so one might better use treeshaking using vite-plugin-vuetify as described here: https://next.vuetifyjs.com/en/features/treeshaking/

please show here your procedures. I want to see how it works.

[MirzaeiDev]

this imports all directives and components, making the app much larger than needed. so one might better use treeshaking using vite-plugin-vuetify as described here: https://next.vuetifyjs.com/en/features/treeshaking/

please show here your procedures. I want to see how it works.

nuxt.config.ts

import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
    css: ['vuetify/styles'],
    vite: {
        // @ts-ignore
        // curently this will lead to a type error, but hopefully will be fixed soon #justBetaThings
        ssr: {
            noExternal: ['vuetify'], // add the vuetify vite plugin
        },
    },
    modules: [
        // @ts-ignore
        // this adds the vuetify vite plugin
        // also produces type errors in the current beta release
        async (options, nuxt) => {
            nuxt.hooks.hook('vite:extendConfig', (config: any) => config.plugins.push(
                vuetify()
            ))
        }
    ]
})

[MirzaeiDev]

some componenets is not working with ssr like v-select , v-autocomplete