Quasar 的 Nuxt 模組
功能
- 自動匯入 元件
- 自動匯入 指令
- 自動匯入
@quasar/extras提供的 svg 圖示集 - 透過
nuxt.config設定使用的 動畫、網頁字型和圖示集 - 設定
quasar使用的 Sass/Scss 變數 - Nuxt DevTools 支援
快速設定
將 nuxt-quasar-ui 依賴項新增至您的專案
# Using pnpm
pnpm add quasar @quasar/extras
npx nuxi@latest module add quasar
# Using yarn
yarn add quasar @quasar/extras
npx nuxi@latest module add quasar
# Using npm
npm install quasar @quasar/extras
npx nuxi@latest module add quasar
就是這樣！您現在可以在您的 Nuxt 應用程式中使用 Quasar Nuxt 了 ✨
示範
用法
<template>
<q-btn color="primary" label="Primary" />
<QBtn color="secondary" label="Secondary" />
<LazyQBtn color="amber" glossy label="Amber" />
</template>
// app.config.ts
export default defineAppConfig({
// Configure Quasar's Vue plugin (with HMR support)
nuxtQuasar: {
brand: {
primary: '#3993DD'
},
}
})
// nuxt.config.ts
export default defineNuxtConfig({
quasar: {
// Configurable Component Defaults
components: {
defaults: {
QBtn: {
dense: true,
flat: true,
},
QInput: {
dense: true
}
}
}
}
})
請參閱 playground 上的詳細用法
選項
plugins
- 類型：
string[] - 預設值：
[]
要套用的 quasar 外掛程式列表。（Dialog、Notify 等）
sassVariables
- 類型：
boolean | string - 預設值：
false
啟用 Quasar Sass/SCSS 變數的使用。可選擇性地設為指向包含變數的檔案的字串。
需要安裝
sass。
quietSassWarnings
- 類型：
boolean - 預設值：
false（如果quasar版本 <=2.13，則為true）
Quasar 釘選到特定版本的 sass (1.32.12)，這會導致棄用警告，在執行 Nuxt 時污染主控台記錄。啟用此選項可消除這些棄用警告。
lang
- 類型：
string - 預設值：
'en-US'
Quasar 元件使用的預設語言包。
iconSet
- 類型：
string | QuasarIconSet - 預設值：
'material-icons'
Quasar 元件使用的圖示集。也應包含在 extra.fontIcons 中才會生效。
cssAddon
- 類型：
boolean - 預設值：
false
啟用時，它為所有 flex（和 display）相關的 CSS 類別提供感知斷點的版本。
警告 請注意，啟用它時，CSS footprint 會明顯增加。因此，只有在您真正需要時才執行此操作。
appConfigKey
- 類型：
string - 預設值：
nuxtQuasar
用於設定 quasar 外掛程式的設定金鑰。
config
- 類型：
object - 預設值：
{}
設定 UI 相關外掛程式和指令（Dialog、Ripple 等）的預設設定。此物件也可以透過 app.config.ts 進行設定。
config.brand
- 類型：
object - 預設值：
{}
修改 Quasar 使用的 css 變數。替代方案為 sassVariables。此選項基本上會附加一個 css 檔案，其中變數定義在根層級。
extras.font
- 類型：
'roboto-font' | 'roboto-font-latin-ext' | null - 預設值：
null
需要 @quasar/extras。
extras.fontIcons
- 類型：
string[] - 預設值：
[]
匯入 @quasar/extras 提供的網頁字型圖示集。
extras.svgIcons
- 類型：
string[] - 預設值：
[]
自動匯入 @quasar/extras 提供的 svg 圖示集。
extras.animations
- 類型：
string[] | "all" - 預設值：
[]
匯入 @quasar/extras 提供的動畫。
components.defaults
- 類型：
object - 預設值：
{}
為 quasar 元件設定預設 prop 值。不支援接受函式值的 props。
CSS 匯入順序
模組將依以下順序匯入 css
- 字型
- 圖示
- 動畫
- Quasar CSS
可以透過 css 選項變更此順序。
範例
export default defineNuxtConfig({
css: [
// ...
'quasar/fonts',
'quasar/animations',
'quasar/icons',
'quasar/css',
// ...
]
})
注意事項
避免使用操縱 <meta> 標籤的 quasar 外掛程式和 composable。請改用 useHead。
執行此操作的已知外掛程式/composable 列表
Quasar 2.15.0 引入了 useId 和 useHydrate 函式，這些函式也由 nuxt 提供。為了支持 nuxt，這些函式不會自動匯入。如果您因為某些原因想要使用它們，則需要明確匯入它們。
開發
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch