これまではVue.jsのコンパイル環境にwebpackを使っていましたが、こちらもやっとViteに移行しました。その際の環境構築についてまとめていきたいと思います。また、Vuex（Pinia）やVue RouterなどSPAを開発するときに必須となるライブラリも使えるようにしていきます。静的なWebページからちょっとしたウェブアプリまで、Viteの快適な環境でサクサク開発を進められるのが良いですね。Laravelのプロジェクトを扱うことも多いのですが、フロント側の環境がLaravel Mixに変わってViteが正式に採用されているということで慣れておきたいですね。   今回の内容は、下記の記事でViteの基本的な開発環境ができているという前提になります。詳しくは各記事でまとめていますので合わせてご参照ください。 （参考記事） フロントエンドの開発環境にVite ＋ TypeScriptを導入する ViteでPostCSS周りの設定やSassを使う ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング    

Vue.jsのインストールと環境構築

ViteでVue.jsの環境構築ですが、基本的にはViteの新規プロジェクト作成のコマンドで、対話形式でフレームワークをVue.jsと選択するだけで全て揃ってしまいます。TypeScriptを使う場合にも言語選択で指定するだけでOKです。webpackの時と違いとても簡単ですね、一瞬で環境ができてしまいます。

$ npm create vite@latest

? Select a framework: ›
❯ Vue
? Select a variant: ›
❯ TypeScript

  もし、VanillaJSですでにViteの環境ができている場合には、Vue.jsのコンパイルに必要となるモジュールを別途インストールしていく必要があります。後述ではVuexやVue Routerなどのライブラリも使いますが、とりあえず最低限必要となるものを下記のようにインストールしていきます。

$ npm install --save-dev @vitejs/plugin-vue vue-tsc
$ npm install vue

// package.json
{
  .....
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    .....
    "@vitejs/plugin-vue": "^4.1.0",
    "vue-tsc": "^1.2.0"
  }
}

  VanillaJSのものとはビルドコマンドの違いに注意する必要があります。コマンドが「vue-tsc」となるためこちらも変更しておきます。

// Vue.js & TypeScript
scripts": {
  .....
  "build": "vue-tsc && vite build",
},

// VanillaJS & TypeScript
scripts": {
  .....
  "build": "tsc && vite build",
},

  続いて、各種設定ファイルを下記のように変更していきます。この辺りについてはVue.jsを使うという理由以外でもプロジェクトの要件に合わせて適宜設定を行なっていきます。 【tsconfig.json】※一部抜粋

{
  "compilerOptions": {
    .....
    "jsx": "preserve",
    "allowJs": true,
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

  【tsconfig.node.json】

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.js"]
}

  Viteの設定ファイルでは、Vue.js専用のプラグインを登録しておくことも忘れないようにします。 【vite.config.js】

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
  ....
  plugins: [
    ....
    vue()
  ],
});

  これでVue.jsのコンパイル環境ができました。Viteの新規作成コマンドでVue.jsを選択するとこの辺りが全て最初に揃うので、元々採用が決まっているのであれば、後から必要なパッケージや設定を行うことで対応できますが、最初に設定しておくのが良さそうですね。   では実際にVue.jsのコンポーネントを使ってみたいと思います。ソースコードのディレクトリに.vue形式のコンポーネントファイルを作成し、実際にコンパイルできるか確認してみます。 【src/App.vue】

<template>
  <h2>{{ today }}</h2>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  const today = computed((): string => {
    const date = new Date();
    return `本日は${date.getFullYear()}年${date.getMonth()}月${date.getDate()}日です`;
  });
</script>

  コンポーネントの読み込みなど、基本的な使い方はwebpackの時とあまり変わらないですね。エントリーポイントとなるスクリプトでimportしていきます。 【src/main.ts】

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

  TypeScriptを使う際に、もし「モジュール '***.vue' またはそれに対応する型宣言が見つかりません」のエラーが発生する場合には、型定義ファイルを下記のように用意して対応します。

$ mkdir types
$ touch types/vue.d.ts

  この辺りはwebpackの時と同様ですね。過去記事「webpackを使うVue.js 3系とTypeScriptの環境構築メモ」でもまとめておりますのでご参考ください。 【types/vue.d.ts】

declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  const component: ComponentOptions;
  export default component
}

  TypeScriptの設定ファイルも合わせて更新しておきます。 【tsconfig.json】※一部抜粋

{
  "include": [
    .....
    "types/**/*.d.ts"
  ],
}

  これでViteでのVue.jsの開発環境が完成しました。ちょっとした静的ページのコーディングでもVue.jsを使えるようになるのは便利ですね。では続いてVue.jsのライブラリを使ってみたいと思います。    

ViteでVuex（Pinia）のライブラリを使う

Vue.jsの状態管理のライブラリとしてメジャーなのが「Vuex」ですね。これまでもいろんな記事で紹介してきましたが、現在ではVuexより扱いやすい「Pinia」というものを使うケースが多いようですので、今回はPiniaをインストールしていきます。大規模なウェブアプリケーションを開発するようなケース以外では、Piniaの方がメリットを感じるかもしれません。ということでまずはライブラリをインストールしていきます。Piniaについて詳しくはまた別記事でまとめてみたいと思います。

// （Vue.js3系で）Vuexを使う場合
$ npm install vuex@next

// Piniaを使う場合
$ npm install pinia

  インストールしたライブラリをimportして使います。ここではPiniaを使った例になりますが、Vuexを使う場合では過去記事「Vue.js（Composition API）＋TypeScriptの環境でVuex・Vue Router・axiosを使ってみる＃3：Vuexで状態管理」でwebpackの環境にてサンプルをまとめていますのでご参考に。 【src/main.ts】

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from '../vue/App.vue';
  createApp(App)
    .use(createPinia())
    .mount('#app');

  続いてストア用のファイルを作成していきます。PiniaではVuexと異なり、mutationがありませんので直接actionを実行することでstateを更新していきます。よりシンプルに状態管理ができるようになりますね。 【src/store.ts】

import { defineStore } from 'pinia';
export const useStore = defineStore('sample-store', {
  state: () => ({
    message: 'Hello World'
  }),
  actions: {
    updateMessage(payload: string) {
      this.message = payload;
    }
  },
  getters: {
    getMessage: (state) => state.message
  }
});

  ストアのデータをコンポーネント側で扱っていきます。ストア用のファイルではストアのデータがエクスポートされているので、そこからgettersで取得できる値やactionsの処理などを参照することができます。 【src/App.vue】

<template>
  <input type="text" v-model="data.text">
  <button type="button" @click="update()">更新</button>
  <div>ストアのデータ：{{ store.getMessage }}</div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import { useStore } from '../ts/store';
  const store = useStore();
  const data = reactive({
    text: store.getMessage
  });
  const update = () => {
    store.updateMessage(data.text)
  }
</script>

  これで問題なくビルドすることが確認できました。Viteの場合でも特に必要となる設定や対応などはなく、webpackと同じような感じで使うことができますね。    

ViteでVue Routerのライブラリを使う

続いてVue Routerの方も試してみたいと思います。こちらも基本的にはwebpackの時と同じように扱うことができます。過去記事「Vue.js（Composition API）＋TypeScriptの環境でVuex・Vue Router・axiosを使ってみる＃5：ルーティングの設定」でもまとめておりますので合わせてご参考ください。まずはこれまで同様インストールを進めていきます。Vue.jsの3系を使う場合には対応するバージョンに注意します。

$ npm install vue-router@4

  ルーティング別のページ用コンポーネントをそれぞれ作成しておきます。これらのコンポーネントはVue Router側の設定により、対応するルーティングに合わせて呼び出されます。 【src/pages/Home.vue・src/pages/PageFoo.vue・src/pages/PageBar.vue】

<template>
  <h1>Current page ：{{ route.name }}</h1>
</template>

<script lang="ts" setup>
  import { useRoute } from 'vue-router';
  const route = useRoute();
</script>

  ページ全体の共通部分のコンポーネントになります。「router-view」の部分が先ほど作成したページコンポーネントに置き換わります。 【src/App.vue】

<template>
  <nav>
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/foo">Foo</router-link></li>
      <li><router-link to="/bar">Bar</router-link></li>
    </ul>
  </nav>
  <router-view />
</template>

<script lang="ts" setup></script>

  最後にルーティング設定とエントリーポイントのスクリプトになります。こちらも使い方としてはwebpackと変わらず同じになりますね。 【src/route.ts】

import { createRouter, createWebHistory } from "vue-router";
import Home from '../vue/pages/Home.vue';
import PageFoo from '../vue/pages/PageFoo.vue';
import PageBar from '../vue/pages/PageBar.vue';
export const useRouter = createRouter({
  history: createWebHistory(),
    routes: [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/foo',
        name: 'Foo',
        component: PageFoo
      },
      {
        path: '/bar',
        name: 'Bar',
        component: PageBar
      },
    ]
});

  【src/main.ts】

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { useRouter } from './route';
import App from '../vue/App.vue';
createApp(App)
  .use(createPinia())
  .use(useRouter)
  .mount('#app');

  これでVite環境で問題なくビルドすることができました。使い方としてはwebpackと変わらずで、設定に関してもシンプルでより手軽に扱える印象がありますね。webpackではコンポーネントが多くなってくると、それに伴いビルド時間も長くなってしまうことがよくありましたが、Viteの高速な環境ではストレスなく開発に集中できますね。