🥑
Nuxt3 × Quasar
前提
UIフレームワーク Quasar
- Quasar
- 選んだ理由
- Vue3への対応
- コンポーネント数が多い
- いい感じのデザイン
- レスポンシブ対応しやすいらしい(うわさ)
Quasar導入
パッケージインストール
- 公式ドキュメントに従ってパッケージインストール
npm install --save quasar @quasar/extras
npm install --save-dev @quasar/vite-plugin sass@^1.33.0
設定
- 公式設定作成ツール的なもので自分のしたい設定値にする
- 公式ドキュメントは、Viteの例なので、nuxtに翻訳します
nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
import { quasar } from '@quasar/vite-plugin'
export default defineNuxtConfig({
ssr: false,
compatibilityDate: '2024-04-03',
devtools: { enabled: true },
vite: {
server: {
watch: {
usePolling: true
}
},
// ----- ここから追加↓↓ -----------------------------
plugins: [
// @quasar/plugin-vite options list:
// https://github.com/quasarframework/quasar/blob/dev/vite-plugin/index.d.ts
quasar(),
],
},
build: {
transpile: ["quasar"],
},
css: [
// Quasarに必要なCSSを読み込むsassファイルを追加
"~/assets/styles/quasar.sass",
],
// ----- ここまで追加↑↑ -----------------------------
})
assets/styles/quasar.sass
// Import icon libraries
@import '@quasar/extras/material-icons/material-icons.css'
// Import Quasar css
@import 'quasar/src/css/index.sass'
- pluginを作成し、quesarが使える状態にする
- nuxtがvueアプリケーション作成時に/plugins配下をロードしてくれます
- 使うコンポーネントだけインポートした方がいいのかもしれない？？
plugins/quasar.ts
import * as components from 'quasar'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(components.Quasar, {
plugins: {},
components,
});
});
使ってみる
- ボタンコンポーネントを試してみます
app.vue(適当なvueファイルでOK)
<template>
<div class="q-pa-md q-gutter-sm">
<q-btn style="background: #FF0080; color: white" label="Fuchsia" />
<q-btn flat style="color: #FF0080" label="Fuchsia Flat" />
<q-btn style="background: goldenrod; color: white" label="Goldenrod" />
<q-btn outline style="color: goldenrod;" label="Goldenrod" />
<q-btn color="grey-4" text-color="purple" glossy unelevated icon="camera_enhance" label="Purple text" />
</div>
</template>
- いい感じのボタンが表示できました
備考
- Nuxt用のModule nuxt-quasar-ui は、非公式と記載があったので利用はやめておきました
Discussion