👀

VolarのComponent Previewを触る

2022/12/12に公開

JavaScript

どうもoreoです。

今回はVS Code内でcomponentのプレビューが確認できるVolarのComponent Preview機能について書きます。

1 Volarとは?

VolarはVue.js公式のIDE/TSツールで、VS Codeなどに導入すると.vueファイルのシンタックスハイライトやインテリセンス補完など、さまざまな開発サポート機能を享受できます。

https://github.com/johnsoncodehk/volar/

今回はComponent Preview機能について触ってみます。

2 サンプルPJの作成

Viteを使ってサンプルPJを作成します。

yarn create vite

上記コマンドを実行し、Project名、framework、variantを選択します。

続いて、cdで作成したPJファイルに移動し、下記コマンドを実行すると、dev serverが立ち上がり、ブラウザ上で動作確認できます。

yarn install
yarn dev

簡単にPJが作成できますね。

3 Component Previewを触る

3-1 Component Previewのセットアップ

Volarのinstall

VS Codeの拡張機能からVolarをinstallします。Vetur(Vue2系用IDE/TSツール)を使用している場合、Volarとコンフリクトするのでそちらは無効にしておきます。

Viteでの設定

Vite側での設定をします。Component Previewを使用するには、vite-plugin-vue-component-previewプラグインを追加する必要があります。

yarn add -D vite-plugin-vue-component-preview

追加後、Viteの設定ファイルであるvite.config.tsで、インストールしたプラグインをViteに読み込ませます。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Preview from "vite-plugin-vue-component-preview";

export default defineConfig({
  plugins: [Preview(), vue()],
});

tsconfig.jsonの設定

続いて、tsconfig.jsonに下記設定を追加します。

{
    "compilerOptions": {
      "types": ["vite-plugin-vue-component-preview/client"]
    }
}

Vueでプラグインを読み込む

最後に、src/main.tsで下記のようにVueにPreviewerプラグインを読み込ませます。

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import Previewer from "virtual:vue-component-preview";

const app = createApp(App);
app.use(Previewer);
app.mount("#app");