✨実験用の小さなコードを公開するのに、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版なので、不思議な挙動が残っています