👀

VolarのComponent Previewを触る

2022/12/12に公開約2,900字

どうも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を作成します。

https://ja.vitejs.dev/guide/#最初の-vite-プロジェクトを生成する

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

https://github.com/johnsoncodehk/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");

https://vuejs.org/api/application.html#app-use

これで、Component Previewが使えるようになりました!!

3-2 Component Previewを触る

ここまでの設定で、VS Codeのエクスプローラー部分に「VUE COMPONENT PREVIEW」が出現するので、それを開きます。

「VUE COMPONENT PREVIEW」を開いた状態で、.vueファイルを開く(アクティブにする)とそのファイルのpreviewが表示されます!

「VUE COMPONENT PREVIEW」はドラック&ドロップで好きな部分に移動できます。

この状態で新たなコンポーネントを作成して、そのファイルを開くとコンポーネントのpreviewが即時で反映されます。ファイル変更時のHMRもサクサクと反映されます!

4 最後に

VS Code内でサクサクとComponet を確認できるのは便利ですね!

5 参考

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

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

https://blog.vuejs.org/posts/volar-1.0.html

Discussion

ログインするとコメントできます