如何將 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>