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.defaults
- 類型：
object - 預設值：
{}
設定 quasar 元件的預設屬性值。 不支援接受函數值的屬性。
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