vuterial

Vue Components Material Components for the Web

Usage no npm install needed!

<script type="module">
  import vuterial from 'https://cdn.skypack.dev/vuterial';
</script>

README

Vuterial

VuterialはMaterial DesignするためのVue.js Componentsです。 Material Components for the webをVue.js用に拡張したものです。

Vue CLI 3で始める

インストール

$ npm i -g @vue/cli
$ vue create my-project
$ cd my-project
$ npm i vuterial

script

import Vue from 'vue'
import {Vuterial} from 'vuterial'
import 'vuterial/dist/vuterial.css'
Vue.use(Vuterial)

Material Components for WebのCSS追加

VuterailはMaterial ComponentsのCSSも別途追加する必要があります。

一番簡単な方法はhtmlにCSSを追記する方法です。

<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">

必要ならMaterial Iconとフォントも追加。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" >

実行

$ npm run serve

CDNで始める

<html>
  <head>
    <meta charset="utf-8">
    <title>vuterial demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuterial@latest"></script>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" >
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuterial@latest/dist/vuterial.css">
  </head>
  <body>
    <div id="app">
      <mdc-button>hello vuterial</mdc-button>
    </div>
    <script>
      Vue.use(vuterial.Vuterial);
      new Vue({
        el:'#app',
      });
    </script>
  </body>
</html>

さらに詳しく

Vuterial Documents https://coppieee.github.io/vuterial/