vue3でMaterialUIを含むCSSフレームワークを導入する:Quasarの利用
使用するUIFramework
導入
今回は上記をViteプラグインとして導入する
インストール
$ yarn add quasar @quasar/extras $ yarn add -D @quasar/vite-plugin sass@1.32.12
main.tsの修正
変更前
vueアプリを作成するのみだった
import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')
変更後
Quasarを追加した
import { createApp } from 'vue' // Import UI Framework import { Quasar} from 'quasar' // Import icon libraries import '@quasar/extras/material-icons/material-icons.css' // Import Quasar css import 'quasar/src/css/index.sass' import App from './App.vue' const app = createApp(App) // Quasarの組み込み app.use(Quasar,{ plugins: {}, // import Quasar plugins and add here }) app.mount('#app')
ViteConfig(vite.config.ts)の修正
変更前
Createしたときから変更なし
import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } })
変更後
Quasarプラグインの設定を実施
import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // import vite-plugin import { quasar, transformAssetUrls } from '@quasar/vite-plugin' export default defineConfig({ plugins: [ vue({ template: { transformAssetUrls } // quaser }), quasar({ sassVariables: 'src/quasar-variables.sass' // quasar }) ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } })
Layoutの導入
https://quasar.dev/layout/layout
LayoutBuillderでレイアウトを作成する
ViewRouterの定義を修正し、Quasarレイアウトで使用するルーティングを作成する