Laravel8でVueを使う: インストール・ComponentとViewの連携

Laravel8にVueをインストールして使ってみました。

Bootstrapと共に併用しています。

インストールの方法、Viewファイルとの連携方法を紹介していきます。

Laravel8でVueを使う: インストールComponentとViewの連携
npm run watchについて注意点＆反映されない場合の対策

Laravel8でVueを使う: インストールComponentとViewの連携

まずはLaravelのプロジェクト作成に必要なものをインストール。

それから、新規プロジェクトを作ります。

すでにここまで終わっていたら、インストール済みでしたら「④npｍをインストール」からスタートしてください。

①Node.jsをインストールする

公式サイトからインストールできます。

無事インストールされていれば、下記コマンドを実行すると、node.jsのバージョンが表示されます。

node -v

node -v

②コンポーザーのインストール

インストール先はこちら。

③ Laravelのプロジェクトを作成する

Laravelのプロジェクトを作成したいディレクトリに移動し、下記を実行します。

composer create-project --prefer-dist laravel/laravel プロジェクト名

1	composer create-project --prefer-dist laravel/laravel プロジェクト名

ここまでの手順が分かりにくい場合には、下記の記事も参考にしてください。

いちからLaravelをインストールするステップを解説しています。

データベースの設定や初期設定まで行っておくと、このあとがラクです。

Laravelのインストールと環境構築・Windows編【Laravel入門講座】

Windows環境でXAMPP(ザンプ）を使ったLaravelのインストール・開発環境構築方法を解説します。最初はインストールするものも多いので、すごくスムーズに進められたとして、2～3時間は見ておいたほうが良いでしょう。 ...

④ Laravel uiをインストール

コマンドでcdを実行して、Laravelをインストールしたディレクトリに移動します。

移動の仕方が分からない場合には、下記をご覧ください。

Laravelに必須のコマンドcdの使い方【初心者のためのLaravel入門講座番外編】

Laravelを学び始めると、「コマンド」を入力する必要がでてきます。 40代でプログラミングを学び始めた私にとって、コマンドは最初は「？？」でした。ただ、知ってみれば、すごくシンプルで簡単です。 Laravelを使う際...

下記を実行します。

composer require laravel/ui

1	composer require laravel/ui

その後、vueを入れます。

–authをつけておくと、認証機能もついてきます。

php artisan ui vue --auth

1	php artisan ui vue --auth

今の状態でブラウザで確認してみると、このような感じです。

npmをインストール

次にnodeを使ってvueに必要なライブラリのパッケージをインストールするために、下記を実施します。

npm install

1	npm install

なお、もしここで【high severity vulnerability】のメッセージが表示されたら、下記をご覧ください。対策をまとめています。

npm install後のhigh severity vulnerability / Prototype Pollutionの原因と解決法

npm installを行ったところ、【high severity vulnerability】というメッセージが表示。どうやら【Prototype Pollution】の危険性があるとのことでした。実際に解決した方法と、P...

ダウンロードしたものをコンパイルするために、npm run dev 実施。

npm run dev

1	npm run dev

再度ブラウザで確認すると、Bootstrapの美しいログイン画面が確認できます。

インストールテスト

この時点で、一度テストしてみます。

適当なviewファイルに下記のように記述してください。

@extends('layouts.app')
@section('content')
    <example-component></example-component>
@endsection

@extends('layouts.app')

@section('content')

<example-component></example-component>

@endsection

じゅんこ

layouts.appのなかの id=app がないと表示されません。

とりあえず上記のコードをそのまま入れてみてくださいね。

インストールがうまくいっていれば、ビューファイルは次のようにブラウザに表示されます。

npm run watchを実行

次にnpm run watchを実行。

npm run watch

1	npm run watch

watchを行うと、対象ファイルを監視してくれて、変更があると、ファイルをコンパイルしてくれます。

なお npm run watchは、php artisan serveのように、ターミナルを終了させるたびに無効になります。

components内の新たなVueファイルの内容を表示させる

次に、vueファイルの内容がブラウザに表示されるようにしましょう。

3ステップで実施していきます。

① vueファイルを作成

resources/components フォルダの中に、vueファイルのサンプル ExampleComponent.vue がはいっています。

ExampleComponent.vueをコピーして、同じ場所に貼り付けます。

ファイル名は TestComponent.vueとしておきます。

②app.jsを編集

resources/js/app.js を開きます。

23行目あたりに次のコードを書き加えます。

Vue.component('test-component', require('./components/TestComponent.vue').default);

1	Vue.component('test-component', require('./components/TestComponent.vue').default);

これで新たに作成したvueファイルの情報が追加されました。

③blade.phpファイルを編集

表示用のblade.phpファイルに、下記タグを入力します。

@extends('layouts.app')
@section('content')
<test-component></test-component>

@endsection

@extends('layouts.app')

@section('content')

<test-component></test-component>

@endsection

④テスト：Viewファイルを表示させる

うまくいっていれば、ビューファイルは次のようにブラウザに表示されます。

表示されない場合は、次を確認、または実行してみてください。

■ファイルの中に @extends('layouts.app') が入っているか、ご確認ください。

■キャッシュの消去とハード再読み込みを実行してください。

方法は下記で解説しています。

Laravel でCSSやJavaScriptの変更が反映されない時の原因と対策

ローカル上で行った変更が公開サーバー上では反映されないときには、２つの解決策があります。他の人も見る環境にある場合には、CSSやJavaScriptの名前の後に、クエリパラメーターを追加します。もし自分だけが確認するためなら...

npm run watchについて注意点＆反映されない場合の対策

なお、npm run watchを行うと動作が重くなります。

不便だと感じたら、npm run watch ではなく、都度 npm run devを行って変更を反映させるようにしてください。

じゅんこ

npm run watch ではvueが反映されないと思ったときにも、npm run dev を試してみてくださいね。

また今回はデータベースの設定や初期設定を省きました。

Laravelのデータベース連携と初期設定の方法は、下記の記事が参考になります。