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を使う方法は、下記が役立ちます。

コメント

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