前回まで

Vue-CLI3でWebComponentを作成し、IE11で起動するところまでやりました。

最初に

不要なコンポーネントを削除します。

src/assets/logo.png
src/components/HelloWorld.vue

vuetify

UIフレームワークとして人気上昇中のvuetifyを使ってみます。

基本的に以下の無いように沿って進みます。

Quick Start — Vuetify.js

install vuetify

vue add vuetify

main.js

src/main.jsに以下を追加

import Vuetify from 'vuetify'
import "vuetify/dist/vuetify.min.css"; // Ensure you are using css-loader

Vue.use(Vuetify)

main.js は以下のようになる。

.src/main.js

import Vue from "vue";
import App from "./App.vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css"; // Ensure you are using css-loader

Vue.use(Vuetify);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

// index.js or main.js
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader

Material Icons

Material Iconsを使う場合には、

に以下を追加する必要があります。

<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

IE11 & Safari 9 support

割愛
前回参照

yarn add babel-polyfill
yarn add @babel/preset-env -d

app.js

<v-app>タグでくくる。　← ここ重要
これが無いとスタイルが適用されません。真白なボタンになったりします。

<template>
  <v-app>
    <div id="app">
      <Counter v-bind:count="7"/>
      <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>
  </v-app>
</template>

Counter.vue

<button> タグを`に変更します。

<template>
  <div>
    <h1>{{ count }}</h1>
    <v-btn color="success" v-on:click="countUp">Count Up</v-btn>
    <v-btn color="info" v-on:click="countDown">Count Down</v-btn>
  </div>
</template>

scriptは以下のようにします。

<script>
export default {
  name: "Counter",
  props: {
    count: {
      type: Number,
      default: 0,
      required: true
    }
  },
  methods: {
    countUp() {
      this.count += 1;
    },
    countDown() {
      this.count -= 1;
    }
  }
};
</script>

動作確認

実行

yarn serve --open

こんなのが出ればOK

web componentの作成

wcオプションでビルドします。
wcはpackage.jsに定義済み

yarn build

動作確認

./dist/demo.htmlをブラウザで開いてみます。

スタイルがががが・・・消えてます。

devtoolで見てもスタイルが当たっているように見えません。

WebComponentはShadowDOMで閉じた世界になることが原因のようです。

スタイルの適用

a

<meta charset="utf-8" /> <title>as demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="./as.js"></script>

<style>
  #host::shadow span {
  }
  @font-face {
    font-family: element-icons;
    src: url(fonts/element-icons.2fad952a.woff) format("woff"),
      url(fonts/element-icons.6f0a7632.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
  }
</style>

<as-demo></as-demo>