Vuetifyとは

デザイン初心者でも簡単に使える、マテリアルデザインのUIコンポーネントです。
ハイブリッド対応されており、ヘッダー・フッターなどスマホデザインっぽいものも用意されているので、
スマホ最適化したサイトやアプリを作成するのに便利です。
難点は、マテリアルデザインなのでどちらかというとAndroidのデザインに近いということでしょうか。
iOSユーザからすると若干違和感のあるデザインになってしまうかもしれません。

vuetifyjs.com

 

7 shares

86 users

97 pockets

Vue.js Material Component Framework — Vuetify.js

https://vuetifyjs.com/ja/

Vuetify.js is a reusable semantic component framework for Vue.js. It aims to provide clean, semantic and reusable components.

手順

npmでvuetifyをインストールします。

npm install vuetify --save

main.jsにimportとプラグインの設定を追加します。

import Vuetify from 'vuetify'
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify)

vuetifyを適用したい範囲を <v-app> タグで囲みます。
アプリ全体に対して適用したい場合は、App.vueを下記のように書き換えます。

<template>
  <v-app>
    <div id="app">
      <router-view/>
    </div>
  </v-app>
</template>

これで導入は完了です。

使い方

ドキュメントのUI　Componentsから使えるコンポーネントを調べられます。
例えばボタンはこんな感じ。

<v-btn color="success">ボタンのラベル</v-btn>

vuetifyjs.com

 

2 pockets

Button Component — Vuetify.js

https://vuetifyjs.com/ja/components/buttons

Button component for Vuetify Framework.

ここで指定しているcolorはデフォルトだとこちらが設定されています。

{
  primary: '#1976D2',
  secondary: '#424242',
  accent: '#82B1FF',
  error: '#FF5252',
  info: '#2196F3',
  success: '#4CAF50',
  warning: '#FFC107'
}

デフォルトのcolorを変更したい場合は、main.jsで設定できます。

Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
  }
})

おわりに

UIコンポーネントのデメリットは「デザインにオリジナリティが失われやすいこと」だと思うのですが、
やはりデザインに強みのないエンジニアには非常に助けになります。
「UIが浮かばないから作れない」よりは「何かしら作ってFBをもらってまたupdateして…」のほうがよほど生産的なので、
活用しながらアプリ作成していきたいなと思います。