nuxt.js - Nuxt 3 和 Vuetify 3 : breakpoints not working?

Question

我尝试将 Vuetify 3 与 Nuxt 3 正确结合使用。

为此，我安装了“vuetify”:“^3.0.0-beta.0”并进行了一些配置。

在 nuxt.config.ts 中:

build: {
    transpile: ['vuetify']
}

在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)
})

它似乎适用于 Vuetify 的一部分，例如，我可以使用

但似乎有缺失的部分:

• JS 行为不起作用:我的轮播没有动画
• 断点错误，例如在桌面模式下:$vuetify.display.smAndDown 为 TRUE。

也许我的安装不好？你有什么想法吗？

谢谢。

Answer 1

API 已更改。您现在必须使用 useDisplay() Hook 。 https://next.vuetifyjs.com/en/features/display-and-platform/

另一个答案帮助了我:Nuxt 3 with Vuetify 3 and SSR reactivity 。它链接到一个工作示例，其中他们使用 useDisplay() 和带有 immmediate:true 选项的观察程序:https://stackblitz.com/edit/github-uqphrm?file=app.vue