概要

備忘録も兼ねて,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
}

Vuetify3 + Vite プロジェクトの作成

概要

目次