はじめに
PHPのフレームワークであるLaravelで作成したアプリケーションに
JavaScriptのフレームワークであるVue.jsを連携させる方法について説明します。
Node.jsのインストール
Node.jsのパッケージ管理ツールnpmを使うので、
Vue.jsを利用するためにはNode.jsが必要です。
まず、https://nodejs.org/ja/からインストールしましょう
推奨版、最新版どちらでも構わないので、インストールしてください。
Vue.jsをアプリケーションへインストールする
インストールするパッケージ一覧が記述されているpackage.jsonを変更した後、
npmを使ってVue.jsをインストール、ビルドします。
package.jsonの変更
package.jsonにはインストールするパッケージがリストとして記述されています。
Vue.js関連のパッケージはvue、vue-template-compilerです。
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.0.0",
"cross-env": "^5.2.0",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"tar": "^4.4.8",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"node-sass": "^4.12.0",
"quill": "^1.3.6"
}
}
Vue.jsのインストール
上のパッケージをインストールしましょう
$ npm install
Vue.jsのビルド
インストールしただけではVue.jsは使えないので、ビルドしていきましょう
$ npm run dev
コンポーネントの登録
作成されたコンポーネントをしましょう
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app'
});
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
上記の記述でresources/js/components/ExampleComponent.vueを
example-componentという名前で登録します
ビルド
Vue.js関連のファイルを変更した時はビルドしなければ、変更は反映されません。
$ npm run dev
コンポーネント
サンプルのコンポーネントを確認しましょう
ない場合は手動で作成してください
<template>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card_body">
I'm an example component.
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mouted() {
console.log('Component moundted.')
}
}
</script>
内容については関係ないので、今回は説明を省きます。
単純なことなので、時間がある時に一度見てください。
ビューファイルでテンプレートを参照する
コンポーネントをビューファイルで参照する方法について説明します。
適当なファイルに挿入して見てください
<head>
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" type="text/css">
<meta name="csrf-token" content="{{csrf_token()}}">
</head>
<div id="app">
<example-component></example-component>
</div>
<script src="{{ mix('/js/app.js') }}"></script>
スタイルシート
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" type="text/css">
linkタグでスタイルシートを参照しています
しかし、スタイルシートはresources/css、public/cssに２つあります。
そのため、mix('/css/app.css")で２つのスタイルシートをまとめて読み込むことができます
CSRFトークン
<meta name="csrf-token" content="{{csrf_token()}}">
LaravelでVue.jsを利用する時はCSRFトークンを利用することが推奨されています。
特に理由がない場合は記述しましょう
コンポーネントの参照
<div id="app">
<example-component></example-component>
</div>
コンポーネントはid="app"の領域で使用できます
example-componentタグで上で作成したコンポーネントを呼び出します。
スクリプトファイル
<script src="{{ mix('/js/app.js') }}"></script>
スタイルシートと同様に、mix('/css/app.css")で２つのスクリプトファイルをまとめて読み込んでいます。
必ず<example-component>の下に記述してください。
動作確認
最後に動作確認をしましょう
忘れずにビルドしましょう
$ npm run dev
上記のような内容が表示されれば完了です！！
疑問、気になるところがございましたら、質問、コメントよろしくお願いします！！！