JSのフレームワークでは「Vue.js」や「React」、「Angular」などが大変人気で様々なプロジェクトでの導入が進んでいます。
この記事ではLaravelのバージョン9でVue.jsのバージョン3を導入する方法について紹介していきたいと思います。
Vueのメリット
- 学習コストが低い
- 導入しやすい
- 開発効率が上がる
- 人気のJavaScriptフレームワークであり将来性・技術的に習得しておきたい
と、色々ありますが細かいことは気にせず、是非試してみましょう。
Laravelのプロジェクトをインストールする
まず、Laravelのプロジェクトを準備します。
composerを使って、Laravelのプロジェクトを作成します。
$ composer create-project laravel/laravel laravel-vue3Laravelのバージョンは下記のように9.19.0です。
$ php artisan -v
Laravel Framework 9.19.0Vue.jsをインストールする
Vue.jsと関連するライブラリを下記のコマンドでインストールします。
$ npm install vue@next vue-loader@next
$ npm install -D tailwindcss実行すると、package.jsonが下記のようになります。
"devDependencies": {
"axios": "^0.25",
"sass": "^1.50.0",
"sass-loader": "^12.6.0",
"tailwindcss": "^3.0.23",
"vue": "^3.2.31",
"vue-loader": "^16.8.3"
},webpack.mix.jsを修正する
webpack.mix.jsを修正して、Vue.jsを使えるようにします。
下記のように、vue()を追加しておきます。
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss')
])これで、準備完了です。
npmでビルドをする
$ npm run dev実行すると、下記のように表示されれば、問題なくビルドが通っています。
✔ Compiled Successfully in 13908ms
┌────────────────────┬─────────┐
│ File │ Size │
├────────────────────┼─────────┤
│ /js/app.js │ 8.51 MiB│
│ css/app.css │ 31.5 KiB│
└────────────────────┴─────────┘
webpack compiled successfullyVueコンポーネントを作成する
resources/jsの配下にcomponentsのディレクトリを作成して、resources/js/components/ExampleComponent.vueに作ります。
<template>
<div class="container">
<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>
</div>
</template>
<script>
export default {
mounted() {
}
}
</script>Vueのマウントを作成する
resources/js/app.jsを修正し、id属性がappの場所にVueがマウントされるようにします。
require('./bootstrap');
import ExampleComponent from "./components/ExampleComponent";
createApp({
components: {"example-component": ExampleComponent}
}).mount('#app')Laravelのテンプレートファイル(vue.blade.php)を作成する
resources/views配下にvue.blade.phpを作成します。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<script src="{{ asset('js/app.js') }}" defer="defer"></script>
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
</body>
</html>ルーティング(routes/web.php)を修正する
Route::get('/vue', function () {
return view('vue');
});動作確認
npmでビルドを行います。
$ npm run dev以下のURLにアクセスします。
http://localhost/vue下記のように表示されたら、vueに連携されたことが確認できました。
最近のコメント