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 佔用空間會顯著增加。因此，只有在您真正需要時才啟用它。
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.autoImport
- 型別：
boolean - 預設值：
true
自動匯入 Quasar 元件
components.defaults
- 型別：
object - 預設值：
{}
設定 Quasar 元件的預設 prop 值。不支援接受函式值的 prop。
CSS 匯入順序
模組將按以下順序匯入 CSS
- 字型
- 圖示
- 動畫
- Quasar CSS
可以透過 css 選項更改此順序。
示例
export default defineNuxtConfig({
css: [
// ...
'quasar/fonts',
'quasar/animations',
'quasar/icons',
'quasar/css',
// ...
]
})
注意事項
避免使用操作 <meta> 標籤的 Quasar 外掛和可組合函式。請改用 useHead。
執行此操作的已知外掛/可組合函式列表
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