CodePenでVue.jsを利用する方法

CodePen、HTML/CSS/JavaScriptをちょっと試したいときやショーケースに使用する際にとても便利ですよね。

この記事ではCodePenでVue.jsを利用する方法について記載しています。
少しコツが要る点もあったので共有したいと思います。

Settings

Penを作成したら、まずはSettingsを開いて設定をします。

JavaScriptタブ

JavaScriptタブで設定を行います。

Add External Scripts/Pens

Search CDNjsの検索入力欄でvueを検索して選択します。¹
Save & Closeを押して設定を保存します。

これでVue.jsが読み込まれるようになりました。

Vue.js devtools

Vue.js devtoolsを利用するための設定を行います。いくつか手順があります。

まずは、JSコードにVue.config.devtools = true;をVueインスタンス生成の前に書きます。

そして、デフォルトのEditor Viewではdevtoolsが有効にならないため、Change ViewでDebug modeを選択して開きます。こうして開いた画面ではdevtoolsが有効になります。

コードの土台

コードの土台としては以下のようになります。

HTML

<div id="app">
</div>

JS

Vue.config.devtools = true;

new Vue({
  el: '#app'
});

あとは普通に書いていくだけです！

クラスとスタイルのバインディングについての注意

注意として、クラスとスタイルのバインディングの際にクラス名などにハイフンが含まれている場合、それらを指定する時は下のようにシングルクォーテーションで囲む必要があります。私はここでけっこうハマりました。

:class="{ 'is-active': isActive }"

まとめ

少し設定が必要ですが、以上の手順でCodePenでVue.jsを利用できるようになったはずです。
Vue.jsでちょっと遊びたい時などはCodePenを使ってみてはいかがでしょうか。

1. この記事を執筆時点ではhttps://cdnjs.cloudflare.com/ajax/libs/vue/2.6.9/vue.min.jsが読み込まれました。 ↩