'Nuxt 3 and Vuetify 3 : breakpoints not working?

I try to use properly Vuetify 3 with Nuxt 3.

For this, I installed the "vuetify": "^3.0.0-beta.0" and I had some configurations.

In the nuxt.config.ts :

build: {
    transpile: ['vuetify']
}

In plugins/vuetify.js :

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

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

    nuxtApp.vueApp.use(vuetify)
})

It seems working for a part a Vuetify, for example, I can user a <v-carousel.....

But it seems that there are missing parts :

  • JS behaviors does not works : my carousel isn't animated
  • The breakpoints are wrong, for example in desktop mode : $vuetify.display.smAndDown is TRUE.

Maybe my installation is not good ? Do you have an idea ?

Thanks.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source