VueのSFC 簡単にcodepen.ioでさくっと書けるけどみんな知ってる？（vue3でも書ける）

結論

https://codepen.io/pen/editor/vue

上のリンクから codepen.ioで　VueのSFC簡単に試せます

codepen使うけど、vueのときは...

みなさんは、ブログ記事用のサンプルだったり、いちいち環境作るほどでもないけど試しにコード書きたい時とかにcodepen.ioでサクッとコード書くみたいなことが結構ありますよね。あります僕は。
しかし、Vueの場合には、codepenだとサクッとSFC(.vueファイルの書き方)で書けなかったので、codesandbox.io に書いてました。 それかlocalでvue-cliするか、諦めるかしてた。

これが codepen.io

これが codesandbox.io

最近vueのSFC に対応した

codepen.ioじゃ、vueサクッと書くなんてできないんだよな...と思っていたんですが、2020/4/14 にできるようになったらしいです。最近気づいた。

https://blog.codepen.io/2020/04/14/a-custom-editor-just-for-vue-single-file-components-vue-files/

A Custom Editor Just for Vue Single File Components (.vue Files)

しかもvue3も

しかもです、vue3でもかけちゃうので、composition-apiやら何やらがお手軽に試せます。嬉しいですね

settingでvue3選べる嬉しい

ちなみに通常のpenと同じように埋め込みも可能です。
サンプルで貼ってるのは、https://codepen.io/pen/editor/vue で作れるやつを vue3に書き換えたやつ

See the Pen vue3 sfc on codepen by kohei sakamoto (@eeonk) on CodePen.

終わり

codepen.ioでVueのSFCもvue3も書けるのとても嬉しいです。
みんなcodepen.ioでvue3をSFCで書こうぜ。

以上、codepen.ioのvue SFC editor機能知ってる人少なそうな気がしたので書きました。