Viteは、Single Fiel Components(SFC)をwebpackなどを使ったバンドル処理を行うことなくvue.jsの開発を行うことができるパッケージです。執筆時点ではvue3のbetaが一緒にインストールされるのでvue3の機能を利用することができます。

vuejs/viteのgithubのページへのリンク

Viteのインストールと起動

実際にインストールと設定を行ってどのようなものか確認してみましょう。

npxコマンドでパッケージのインストールを行います。


$ npx create-vite-app vite_project
npx: 1個のパッケージを8.059秒でインストールしました。
Scaffolding project in /Users/reffect/Desktop/vite_project...
Done. Now run: 

  cd vite_project
  npm install (or `yarn`)
  npx vite (or `yarn vite`)

インストール後のメッセージに表示されている通りプロジェクトのディレクトリに移動しnpm installを実行します。


$ cd vite_project/
vite_project $ npm install

その後npx viteを実行すると開発サーバが起動します。


 $ npx vite
vite v0.5.3
Dev server running at:
  > http://localhost:3000
  > http://192.168.1.101:3000

通常のvue.jsプロジェクトと比較して表示に短い時間でここまでの処理を行うことできます。

ブラウザでhttp://localhost:3000にアクセスすると下記の画面が表示されます。

Viteの初期画面
Viteの初期画面

Viteのファイル構成

フォルダ構成も下記のようにシンプルなものでindex.htmlファイルからApp.vueがimportされています。


<div id="app"></div>
<script type="module">
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
</script>

App.vueファイルの中身は、Single File Componentsファイルなのでtemplate, script, styleタグで3つのパートに分かれています。Visual Studio Codeでこのファイルを開くと、The template root requires exactly one element.がでますが、Vue 3なのでこのエラーメッセージは無視することができます。


<template>
  <h1>Hello Vite + Vue 3!</h1>
  <p>Edit ./App.vue to test hot module replacement (HMR).</p>
  <p>
    <span>Count is: {{ count }}</span>
    <button @click="count++">increment</button>
  </p>
</template>

<script>
export default {
  data: () => ({ count: 0 })
}
</script>

<style scoped>
h1 {
  color: #4fc08d;
}

h1, p {
  font-family: Arial, Helvetica, sans-serif;
}
</style>

Viteの動作確認

incrementボタンをクリックするとCountの数がクリックする毎に増えます。

incrementボタンをクリック
incrementボタンをクリック

ブラウザの画面にもhot module replacementと記述されている通り、App.vueファイルを更新するとすぐにブラウザにその変更が反映されます。

通常のVueプロジェクトだとnpm run watchコマンドを実行し、ファイルを更新するたびにコンパイルが実行されますがViteではそのような作業は必要ありません。

別のコンポーネントをimport

プロジェクトディレクトリにcomponetsディレクトリを作成しHello.vueファイルを作成します。


<template>
  <h2>Hello World</h2>
</template>
<script>
export default {};
</script>

App.vueファイルから作成したHello.vueファイルをimportしブラウザ上に表示させます。


<template>
  <h1>Hello Vite + Vue 3!</h1>
  <Hello />
  <p>Edit ./App.vue to test hot module replacement (HMR).</p>
  <p>
    <span>Count is: {{ count }}</span>
    <button @click="count++">increment</button>
  </p>
</template>

<script>
import Hello from "./components/Hello.vue";
export default {
  components: {
    Hello
  },
  data: () => ({ count: 0 })
};
</script>

<style scoped>
h1 {
  color: #4fc08d;
}

h1,
p {
  font-family: Arial, Helvetica, sans-serif;
}
</style>

追加したHello.vueファイルの中身が表示されることが確認できます。

importしたコンポーネントを表示
importしたコンポーネントを表示

Vue3のComposition API

Vue 3のbetaがインストールされていますが、ここまでではVue 3の機能といえばSingle root Elementが不必要になったぐらいしか恩恵を受けてません。

実際にVue 3のComposition APIのrefを使ってVue3が動作するのか確認します。Hello.vueコンポーネントを以下のように更新します。ブラウザに表示される内容は同じです。refをvueからimportしてsetupの中でmessageに設定し{{ message }}でmessageの内容を表示させているだけのシンプルなものですが、設定通りにブラウザ上にHello Vue 3が表示されます。


<template>
  <h2>{{ message }}</h2>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const message = ref("Hello World");

    return {
      message
    };
  }
};
</script>
Composition APIを利用
Composition APIを利用

viteのgithubのページには以下の記述があるように今後どのようになっていくのかが楽しみです。

vite is highly experimental at this stage and is not suitable for production use, but we hope to one day make it so.(viteは、実験的な段階でプロダクションには適していないがいつかプロダクションでも使えることを望んでいる。)