N
Nuxt•3y ago
Garzec

How to install Vuetify?

I followed this guide https://codybontecou.com/how-to-use-vuetify-with-nuxt-3.html without the Customize Sass Variables section. So the plugin is 
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        ssr: true,
        components,
        directives,
    })

    nuxtApp.vueApp.use(vuetify)
})
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        ssr: true,
        components,
        directives,
    })

    nuxtApp.vueApp.use(vuetify)
})
and the nuxt.config is 
export default defineNuxtConfig({
    css: ['vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css'],
    build: {
        transpile: ['vuetify']
    }
});
export default defineNuxtConfig({
    css: ['vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css'],
    build: {
        transpile: ['vuetify']
    }
});
It almost seems to work. But some CSS seems to be missing, I tested with 
    <v-app>
        <v-app-bar title="App bar goes here"></v-app-bar>

        <v-main>
            <v-btn color="primary" prepend-icon="mdi-vuetify">Main content goes here</v-btn>

            <v-btn
                prepend-icon="mdi-check-circle"
                append-icon="mdi-account-circle"
            >
                <template v-slot:prepend>
                    <v-icon color="success"></v-icon>
                </template>

                Button

                <template v-slot:append>
                    <v-icon color="warning"></v-icon>
                </template>
            </v-btn>
        </v-main>
    </v-app>
    <v-app>
        <v-app-bar title="App bar goes here"></v-app-bar>

        <v-main>
            <v-btn color="primary" prepend-icon="mdi-vuetify">Main content goes here</v-btn>

            <v-btn
                prepend-icon="mdi-check-circle"
                append-icon="mdi-account-circle"
            >
                <template v-slot:prepend>
                    <v-icon color="success"></v-icon>
                </template>

                Button

                <template v-slot:append>
                    <v-icon color="warning"></v-icon>
                </template>
            </v-btn>
        </v-main>
    </v-app>
and get the following result for a button
codybontecou.com
How to use Vuetify with Nuxt 3 | Cody Bontecou
Get Vuetify to work with Nuxt 3 with this quick tutorial.
No description
1 Reply
Garzec
GarzecOP•3y ago

Did you find this page helpful?