Edited at
Vue.js #2Day 25

vueの単一ファイルコンポーネント用のオンラインエディタを作ってみた

More than 1 year has passed since last update.

✨実験用の小さなコードを公開するのに、jsfiddleはとても便利ですよね。

📄vueは、単一ファイルコンポーネント(SFC)の仕組みがとても気に入っています。

この2つを組み合わせたものが欲しくて、VueFiddleなるものを密かに開発を進めています。


About VueFiddle


  • WIP

  • vueに特化したオンラインIDE

  • 単一ファイルコンポーネントの記述対応

  • templateは HTML / PUG 対応

  • styleは CSS / LESS 対応

  • scriptは javascript / TypeScript 対応

  • URLシェアに対応

  • サポートブラウザ(PC版 Chrome/Firefox)


Usage

基本的には、jsfiddleと似せています。

 左上のtemplate(HTML)パネルに、templateを記述し、

 左下のscript(JAVASCRIPT)パネルに、scriptを記述し、

 右上のstyle(CSS)パネルに、styleを記述します。

そして、上部のRUNを押すか、F5で実行します。

各パネルの言語はオルト言語へ切り替え可能です。

(HTML⇔PUG 、 javascript ⇔ typescript 、 CSS ⇔ LESS)

必要に応じて、左側のMENUから、タイトルや説明等を設定できます。

scriptパネルでのnpmの外部モジュール読込にも対応していますが、

umdかamd形式のモジュールを読み込む必要があります。


Example

WIP版なので、不思議な挙動が残っています