VuetifyをLaravelに入れる ~Laravel x Vue成長日記~ #3

Vuetifyとは

Vue用のUIコンポーネントでマテリアルデザインが簡単に?実現できるようです。

使ってみようじゃあないですか！

ググるも過ぎゆく時間…

Laravel + Vue + Vuetify関連でググってみていましたが、あまり情報がなく導入に苦戦したので今回手順を共有したいと思います。

導入方法

まずはnpmでvuetifyをインストールしましょう。

npm i vuetify --save

npmのインストールが完了したら

resources/js/app.jsにvuetifyに修正を加えます。

Vuetifyをインポートしvueインスタンスに追加するように記述を変更してください。

import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);

const app = new Vue({
    el: '#app',
    vuetify: new Vuetify()
});

インスタンスの修正が終わったらテンプレートにvuetifyのコンポーネントを書いてみましょう。

例えば、VuetifyをExampleComponent.vueのテンプレート(最初から入っているやつ)で使うとすると以下のようになります。

<template>
    <v-app>
        <v-content>
            <v-container fluid fill-height>
                <v-layout wrap>
                    <v-btn color='primary'>Button</v-btn>
                </v-layout>
            </v-container>
        </v-content>
    </v-app>
</template>

内容としてはマテリアルデザインのボタンを配置するというシンプルなものです。

これでprimaryボタンが以下のように出力されたかと思います。

例で使用したコンポーネントの説明を軽くしておくと

• v-content : レイアウトのメインとなるコンテンツ。サイドメニューはここに入らない。
• v-container : グリッドを使うための親要素
• v-layout : グリッドのラッパー

といった感じです。

時間がかかったところ

この一連の流れでハマってしまって時間を費やしたポイントは、

• vuetifyのすべての要素はv-appの中になければならない
• VueインスタンスにVuetifyを追加すること

でした。

VueインスタンスにVuetifyを渡すのは公式ドキュメントにも記載がありますね。見れていなかった自分が恥ずかしいです。

Vuetifyの設定をしたら、それをVueインスタンスに渡してあげます。この処理の流れは vue-router や vuex と同様です。

https://vuetifyjs.com/ja/getting-started/quick-start#vuetify%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E3%83%96%E3%83%BC%E3%83%88%E3%82%B9%E3%83%88%E3%83%A9%E3%83%83%E3%83%97

イケてる感じはしますがVuetifyに慣れる(使いこなす)のに時間かかりそうだなあとは思いました。

寄り道をしたけど前に進んでいる！

Vue自体の勉強ではないですが、一つ一つ前にすすんでいる感じがします。

わからないなーって時間費やしているときも実はいい勉強なんですよね。

もっとバシバシVueかけるようにがんばります！

個人開発でなにを作るかちょっと思いつきましたので、それに向けてやっていけたら力つきそうです！