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

LaravelとVue連携
スポンサーリンク

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

インストール先はこちら

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

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

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

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

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

④ Laravel uiをインストール

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

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

下記を実行します。

その後、vueを入れます。

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

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

npmをインストール

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

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

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

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

インストールテスト

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

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

 

じゅんこ
じゅんこ

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

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

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

npm run watchを実行

次に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ファイルの情報が追加されました。

③blade.phpファイルを編集

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

 

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

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

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

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

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

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

じゅんこ
じゅんこ

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

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

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

LaravelでVueを使う方法は、下記が役立ちます。

LaravelとVue連携 Laravel・PHP豆知識・トラブル対策

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中!
会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

【個別サポート実施中】

「本ブログに記載の方法を試してみたけれど、うまくいかない」「コードを見てほしい」という方のために、有償でメールサポートいたします。以下のボタンをクリックして相談フォームにアクセスして下さい。

詳しく見る

Twitter始めました。
スポンサーリンク
40代からプログラミング!

コメント

タイトルとURLをコピーしました