概要
備忘録も兼ねて,Vuetifyのプロジェクトの作成方法や開発に必要な設定を記載します.
目次
動作環境
- Windows 11
- node v18.12.1
- npm 8.19.2
- powershell
拡張機能の追加
以下の拡張機能をVSCodeに追加します.
- Vue Language Features (Volar)
- TypeScript Vue Plugin (Volar)
- Prettier - Code formatter
Vueプロジェクトの作成
始めにVueプロジェクトをViteから作成します.
プロジェクト作成時にルータを入れたかったのでカスタム設定しています.
選択項目ではEnd-to-End Testing以外はYesで設定しました.
PS C:~vuetify> npm create vite
√ Project name: ... vuetify-project
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue
React
Preact
Lit
Svelte
Others
? Select a variant: » - Use arrow-keys. Return to submit.
TypeScript
JavaScript
> Customize with create-vue ↗
Nuxt ↗
Vue.js - The Progressive JavaScript Framework
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
プロジェクトディレクトリに移動し,以下コマンドから問題なく起動できるか確認します.
npm install
npm run dev
Vuetifyの導入
パッケージの追加
npm install でVuetifyを追加します.
PS C:~\vuetify-project> npm install vuetify
added 1 package, and audited 478 packages in 6s
112 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
vuetify.tsの作成
公式ドキュメントに沿ってpluginsに以下のvuetify.tsを追加します.
pluginsフォルダは作成されていないのでsrc直下に作成します.
// /src/plugins/vuetify.ts
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
export default createVuetify({
components,
directives,
})
Could not find a declaration file for module 'vuetify/components' エラーの対応
Vuetifyの型定義ファイルがないため,以下のようにエラーが発生します.
tsconfigにVuetifyの記載を追加することで解消するようなので,tsconfigを編集します.
参考：TypeScript + Vuetifyでエラー「Could not find a declaration file for module 'vuetify/lib'. 」したときの対処法
プロジェクトルートにtsconfig.vuetify.jsonを作成します.
※設定項目が不明だったので,vue createで作成した別プロジェクトからtsconfig.jsonの内容を持ってきました.
// tsconfig.vuetify.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"useDefineForClassFields": true,
"sourceMap": true,
"baseUrl": ".",
"types": ["vuetify"],
"paths": {
"@/*": ["src/*"]
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
"exclude": ["node_modules"]
}
tsconfig.jsonにtsconfig.vuetify.jsonの記載を追加します.
// tsconfig.json
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
},
// 以下を追加
{
"path": "./tsconfig.vuetify.json"
}
]
}
main.jsの修正
main.jsにVuetifyに関する設定を追加します.
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify' // 追加
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(vuetify) // 追加
app.mount('#app')
Vuetifyが適応されたかどうか確認
App.vueにVuetifyのコードを記載し,実際に動くか見てみます.
以下はApp.vueにボタンのみ設置した場合です.
<template>
<v-btn block rounded="0" size="x-large">Test Button</v-btn>
</template>
以下の通り,Vuetifyが適応されていることが確認できました.
適応されていない場合はボタンが表示されません.
マテリアルアイコンを利用する場合
マテリアルアイコンを利用する際は以下のようにvuetify.tsを変更します.
参考:Icon Fonts
// vuetify.ts
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { aliases, mdi } from 'vuetify/iconsets/mdi'
import '@mdi/font/css/materialdesignicons.css'
export default createVuetify({
components,
directives,
icons: {
defaultSet: 'mdi',
aliases,
sets: {
mdi,
}
},
})
アイコンのinstallもしておきます.
npm install @mdi/font -D
以下のようにApp.vueを書き換え,アイコンが表示されるか確認します.
// App.vue
<template>
<v-icon icon="mdi-home" />
</template>
設定できていれば以下のようにアイコンが表示されます.
設定できていない場合は何も表示されません.
settings.jsonの設定
保存時に自動的に修正してほしいので,formatterの設定をsettings.jsonに記載します.
// .vscode/settings.json
{
"cSpell.words": ["iconsets", "materialdesignicons", "pinia", "vuetify"],
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}