Vuetify を CDN で利用するテスト

1. 目的

• Vuetify.js を CDN で利用する実験です。このページに導入しています。
• Vue の Single File Components （以後 SFC と書きます）を、ページアクセス時に HTML に取り込んで利用する実験も兼ねています (webpack などは利用しない) 。

2. 記述するコード

詳しくは、ブラウザの機能を使ってこのページのソースをみて下さい。

本ページのHTML コード（関連する部分のみ）

<div id="app">
  <v-app>
    <v-content>
      <h2>App コンポーネント</h2>

      {省略}

      <p>この下に、Foo コンポーネントを表示します。</p>

      <Foo/>

    </v-content>
  </v-app>
</div>

<div id="foo"></div>

• vuejs のタグの使い方がおかしいかもしれません（詳しくないため）。

本 HTML 内の JavaScript コード

<script type="module">
import Foo from './Foo.js';

new Vue({
  el: '#app',
  components: { Foo }
});
new Vue({
  render: h => h(Foo),
}).$mount('#foo');
</script>

Foo.js のコード

export default {
  name: 'Foo',
  template:`
  <div class="foo">
    <h2>Foo コンポーネント</h2>
    {省略}
  </div>
  `
}

3. Vuetify を使った表示

4. 実験後のメモ

4-1. Single File Components について

• SFC ファイル(.vue) を普通の JavaScript ファイル(.js) として扱う範囲でしか対応できない。以下、具体的に書く。
• SFC ファイルの拡張子を .vue にできない。MIME の問題が起こりブラウザがエラーを出す。Webサーバー側でMIMEの対応をしても、文法エラーになる。
• JavaScript の文法に沿った内容しか書けないので、<template> や <script> や <style> などのタグは書けない。
• なので、SFC ファイル内でHTMLテンプレートを書くには、export で返すオブジェクトの template プロパティに書くしかない（文字列扱い）。そして style は書けない（style プロパティはない）。

4-2. スタイルについて

• 全ての要素のマージンが 0 になってしまう。これは、vuetify.min.css で定義されているのが原因。
• vuetify.css と vuetify.min.css とで内容が少し違っている。これでは使えない。
• vuetify.min.css を読み込んでしまうと、ページ全体のスタイルが変えられてしまうので、一部分だけ Vuetify のコンポーネントを利用するということがやりにくい。結局すべての箇所で、その箇所に合った Vuetify 独自のCSSクラスを探して適用しないといけない。

参考

• Quick Start — Vuetify.js
• Single File Components — Vue.js