はてなブログでVue.js + Vuetifyを使う

はじめに

はてなブログは、記事の中にscriptタグを埋め込めばJavaScriptを使えるようです。さらにCDNを使えば、ライブラリやフレームワークも使うことができます。そこで今回は、はてなブログの記事中でVue.jsとVuetifyを使ってみました。何の役に立つかはわかりません！

全体の構成

記事の構成を以下のようにすると、Vue.jsとVuetifyを使うことができます。ブログの記法は「はてな記法」に設定しています。
※ 読みやすさのために改行やコメントを入れています。

<div id="app">
  <v-app>
    <<ブログ本文>>
  </v-app>
</div>

<!-- Vuetify用 CSS -->
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.4.3/dist/vuetify.min.css" rel="stylesheet">

<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.min.js"></script>

<!-- Vuetify -->
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.3/dist/vuetify.min.js"></script>

<!-- Vueコード -->
<script>
  new Vue({
    el: "#app",
    data: {
      <<省略>>
    },
    methods: {
      <<省略>>
    },
    <<省略>>
  })
</script>

Vuetifyのコンポーネントを使う

前述のような構成にすることで、ブログ本文中でVuetifyのコンポーネントを使うことができます。

v-card

This is a card.

<v-card max-height="auto" max-width="80%">
  <v-card-text>This is a card.</v-card-text>
</v-card>

v-snackbar

※ 変数itemはページ下部にあるVueコードのdata{}内で宣言されています。

<template>
  <v-treeview
    dense
    :items="items"
  ></v-treeview>
</template>

v-btn

※ 変数numはページ下部にあるVueコードのdata{}内で宣言されています。
Count: {{ num }}

<v-btn v-on:click="num += 1">Count: {{ esc("num") }}</v-btn>

終わりに

はてなブログの記事の中でVue.js・Vuetifyを使うことができました。はてな記法とVueコンポーネントが共存しているのが面白いですね。