◆当ページにはプロモーションが含まれています

Laravel

【2020年9月 現在】LaravelでVuetifyを使えるようにする全手順

みなさん、こんにちは。どんぶラッコです。

Laravel の UI として vue が使えるということはみなさんご存知だと思います。

私は vue のUIフレームワークである vuetify をよく使っているので、Laravelでも使えるように設定していこうと思います!

早速設定していきましょう!

どんぶラッコ
どんぶラッコ
Laravel 7.X 系を使っている前提で解説を進めます!

Laravel インストール & vue セットアップ

まずはLaravelのプロジェクトを作成します。

laravel new [プロジェクト名]
どんぶラッコ
どんぶラッコ
laravelコマンドが使えない人は公式サイトを参考にセットアップしましょう

https://readouble.com/laravel/7.x/ja/installation.html

次に、vueを使えるようにします。

認証機能を使いたい人は、 --auth オプションをつけておきましょう。

composer require laravel/ui
php artisan ui vue --auth

どんぶラッコ
どんぶラッコ
セットアップの方法や以前のバージョンのセットアップ方法はこちらのQiita記事がわかりやいです!

npm パッケージをインストール

次に、先ほどセットアップしたvue関連のnpmパッケージを引っ張ってきます。NPMを使ってインストールしましょう。

npm i
どんぶラッコ
どんぶラッコ
“npm i” = “npm install” の略ですよ!

次に、laravel mix の機能を使って webpack ビルドする必要があります。

開発中の場合は

npm run watch
# or
npm run hot

を使うといいです!

ホットリロードなしでビルドしたい場合は

npm run dev #開発環境
npm run prod #本番環境

コマンドを叩けばOKです。

Vuetifyをセットアップする

では、ここまでできたらいよいよvuetifyです。早速設定していきましょう!

まずは vuetify パッケージを npm 経由でインストールします。

npm i vuetify

次に、resources/js/app.js を編集します

import Vuetify from 'vuetify';
Vue.use(Vuetify);

// ...中略

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

vuetifyのCSSファイルは resources/sass/app.scss に追記しておきましょう。

@import '~vuetify/dist/vuetify.min.css';

これで完了です!

Option: アイコンのインストール

ついでに、mdiアイコンも使えるようにしておきましょう。

npm install @mdi/font -D

先ほど css読み込みを記述した resources/sass/app.scss に追記します。

@import ‘~@mdi/font/css/materialdesignicons.min.css’;

最後に、resources/js/app.js でアイコンフォントを読み込むようにします。

const app = new Vue({
    el: '#app',
    vuetify: new Vuetify({
        iconfont: 'mdi', //追記
    })
});

これでセットアップは完了です!

注意点としては、laravelではデフォルトのCSSフレームワークとしてBootstrapが導入されていますが、Bootstrapを有効にしたままではレイアウトがバッティングしてしまうことがあります。

必要に応じて resources/sass/app.scss の読み込みをオフにしておきましょう。

vuetifyをlaravelでも使い倒しちゃいましょう!!

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です