More than 5 years have passed since last update.

さくっとVue3をCodePenで試したい

Posted at 2020-07-30

さくっとVue3をWebブラウザで試したい時に使えるTipsを見て、Qiitaとかteratailとかに実行可能なコード貼り付けたいなと思って試してみた。

設定

CodePenの settings で設定画面から、JSを選んで、https://unpkg.com/vue@nextを追加します。

次に、HTMLにターゲットを用意します。

<!DOCUTYPE html>
<html>
  <body>
    <div id="vue-app" />
  </body>
<html>

更にさくっとやりたいときはpugを指定して

# vue-app

お行儀はよくないかもしれませんが、動作しました。

あとは元ネタと同様にVueのコードを書いていきます。
CodePenに書いたサンプルはこちらになります。
https://codepen.io/iwamoto-takaaki/pen/vYLqWar