如何将 Quasar 添加到现有的 Nuxt 应用程序？

Question

我想将 Quasar 安装到我现有的 Nuxt 项目中。 我一直在阅读类星体文档，他们在安装页面中唯一提到的是他们自己的 CLI，它没有 Nuxt 选项。 我也遇到了nuxt-quasar模块，但它不再维护了。 有没有人有这方面的经验？

Answer 1

您可以关注此 github 问题： https://github.com/NickHurst/nuxt-quasar/issues/15

在他们的论坛上询问： https://forum.quasar-framework.org/

但看起来 Quasar 实际上并不是针对 Nuxt 内部的集成，因为它正在做自己的事情。

您还可以创建一个 Vue 应用程序，添加 Quasar，然后将其迁移到 Nuxt。 繁琐但可行的 IMO。 但有一件事是肯定的，这不是一个常见的用法，看这个用例的不存在。

你也可以问 Bence Szalai： https://github.com/NickHurst/nuxt-quasar/issues/7#issuecomment-683255301
他的 twitter DM 是开放的。

最后，您仍然可以尝试 Nuxt 模块，看看效果如何。 该项目可能没有太多更新。 或者 CDN 方式，但是是的……CDN。

Answer 2

如果它与 Vue 兼容，那么它与 Nuxt 兼容。 时期。 不知道接受的答案是什么说它很麻烦，这与您对任何其他框架所做的过程相同，基本上与您使用 Vuetify 所做的相同。 Quasar 是非标准的，当然，但它与 Vue 兼容，没有什么特别麻烦或困难的地方。

以下是您在 Nuxt 3 中的操作方式。对于 Nuxt 2，您导入 Vue 以.use某些东西略有不同，我为 Nuxt 3 做了更多的未来证明。

来自https://quasar.dev/start/umd 。 只是做他们在那里做的同样的事情，但是以 Nuxt 的方式。 首先，他们在头部得到 styles 和 fonts。 然后他们得到脚本。 然后他们在 Vue 中注册 Quasar。 让我们现在就这样做！

// plugins/quasar.js
import 'quasar/dist/quasar.prod.css'
import Quasar from 'quasar/dist/quasar.umd.prod';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Quasar, {
        config: {
            // options
        }
    })
})

// nuxt.config.js
{
    plugins: [
        '~/plugins/quasar.js'
    ]
}

完成：现在我们可以像这样使用它：

<q-page-container>
  <q-page>
    <h1>Hello World!</h1>
  </q-page>
</q-page-container>