Vue3 + TypeScript + Vuetify3(Alpha) + Viteのプロジェクトを作成しようとしたときに色々詰まったのでメモを残しておく。

環境

以下がインストールされている前提。

❯ node -v
v15.8.0

❯ yarn -v
1.22.10

maroKanatani

プロジェクトの作成

Vite公式通りに作成する。
テンプレートはvue-tsを利用する。

yarn create vite my-vue-app --template vue-ts

maroKanatani

起動してみる。

cd my-vue-app
yarn install
yarn dev

maroKanatani

Vuetify3(Alpha)のインストール

こちらもVuetify公式通りインストールを試みる。

❯ vue add vuetify

// presetはPreview (Vuetify 3 + Vite)を選択。
? Choose a preset:
  Default (recommended)
❯ Preview (Vuetify 3 + Vite)
  Prototype (rapid development)
  V3 (alpha)
  Configure (advanced)

この状態で起動するとエラーが出ている。

maroKanatani

エラーの解消

色々とTypeScriptではなくJavaScriptベースの箇所があるので直していく。

index.htmlの修正。

index.html

-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/main.js"></script>

vite.config.jsとvite.config.tsが作成されるのでもともとあったvite.config.tsを削除する。
デフォルトだとvite.config.jsでsrc/styles/variables.scssを読み込むようになっているので修正する。（今回は該当部分を削除する。）

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

- import path from 'path'
- const srcPath = path.resolve(__dirname, 'src', 'styles', 'variables.scss')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  define: { 'process.env': {} },
-  css: {
-    preprocessorOptions: {
-      sass: { additionalData: `@import ${srcPath}\n` },
-      scss: { additionalData: `@import ${srcPath};\n` },
-    },
-  },
  /* remove the need to specify .vue files https://vitejs.dev/config/#resolve-extensions
  resolve: {
    extensions: [

maroKanatani

起動できた。

maroKanatani

↑でsrc/styles/variables.scssの該当部分を削除したが、空のsrc/styles/variables.scssを新規に追加してしまっても良い。（むしろこちらの方が正しいかもしれない）