Laravel+Vue.jsアプリにVuetifyを検討してみた。

はじめに

先日作成したプロジェクト(※以下記事)を用いてVuetifyの実装をしてみたいと思います。

【Axiosの実装】Laravel+Vue.jsでのDB連携【超ミニマムチュートリアル】

環境に関して

Laravel 6.8

PHP 7.3

Windows/XAMPP/MySQL

Vuetifyの実装

①デフォルトで記載されているBootstrapのための記載をなくして整理する。

※ソースコードを汎用的に使っていきたいと思ったので、別記事にソースコードだけをまとめました。

【Laravel】装飾一切なしのログイン/会員登録画面ソースコード

まさる
めちゃくちゃ雑ですがだいぶすっきりしました。

②Vuetifyをインストールする。

npm install vuetify

③js/app.jsでインポートする。

app.jsを編集

④todo.vueで試す。

<template>
  <div>
  <v-app>
~~略
    <v-btn small color='primary'>Hello Vuetify</v-btn>
~~略
  </v-app>
  </div>
</template>

とりあえず簡易的ですがボタンコンポーネントで実装されていることを確認できました◎

注意
Vuetifyはv-appタグ内に記載する必要があります。色が適用されなかったり正常に機能しなくなります。
まさる
そしてここでLaravelのBlade側にはVuetify適用できないじゃん!!と気づきました。。。

ためしにMDBootstrapを使ったところこちらは予想通りVue.js側でも適用できました

注意
MDBootstrapも無料ですべてのコンポーネントが使えるわけでもなく、有料版があるみたいでした。いろいろ制約あるな~。

おわりに

Vuetifyを実装してみて気づいたことは、LaravelのBlade側には適用できない点。

これ盲点でした。。。やってみないと分からないこと沢山ありますね。。。

ログインページをLaravel側で実装しようと思うとデザインの統一ができないので使うべきではないと感じました。

Laravel×Vue.jsのポートフォリオ制作にはMDBootstrapを使うべきか。

とりあえず次回は、デザインを排除してフォルダ機能の実装をしていこうと思います。

参考

公式

Laravel 5.5 データベース:マイグレーション

マイグレーションファイル作成時のオプションに関して。

Qiitaなど

STEP04:Laravel5.7 + Vue2.5 でvue-routerとVuetifyを使ってみる 色設定含めしっかりと実装されている。

Laravel6系 に Vuetify を入れてみる

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

Vuetifyの使い方:実践の前に覚えておいた方がいいこと

コメントを残す