ReactやAngular、Vueなどは独自のタグを使ったWebコンポーネント型のシステムと言うこともあって、これまでのHTMLデザインの手法が通じなくなっています。デザインの確認などで苦戦している人も多いのではないでしょうか。 そこで使ってみたいのがVue Designerです。Visual Studio Codeプラグインとして動作するVueデザイン確認ツールです。

Vue Designerの使い方

エディタです。Vueファイルに対応しており、デザイナーを開くと右側にプレビューが表示されます。

もちろんリアルタイムに更新されるので、スタイルタグの内容を変えるとすぐに反映されます。

props、データの確認もできます。

Webブラウザなどで表示を確認するのも良いですが、プログラミングエディタの中に埋め込まれていることで、より確認が簡単にできるようになっています。Vue Designerを使えばデザインの確認と開発がさくさくと進むのではないでしょうか。

Vue DesignerはVisual Studio Code用のオープンソース・ソフトウェア（MIT License）です。

Vue Designer - Visual Studio Marketplace ktsn/vue-designer: Vue component design tool