laravel上でVuejsを実装は、大まかに３段階です。
- resources/js/components にvueデータを作成。
- resources/js/app.jsにvueコンポーネントを定義。
- app.jsに定義したvueコンポーネントを resources/views/*.blade.phpにマークアップ。
ExampleComponent.vueを表示してみましょう！
app.jsを以下のように設定します。
resources/js/app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
デフォルトのwelcome.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>ExampleComponent</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
vueファイルを記述、変更したらターミナルでコンパイルをします。
#コンパイル
npm run dev
#サーバーを立ち上げて確認
php artisan serve
表示されました！
新しくVueを作成してみましょう。
- vueファイルを作成します。
resources/js/components/LaravelVue.vue
<template>
<div>
<h1>LaravelでVueを実装</h1>
<p>Good!!</p>
</div>
</template>
- resources/js/app.jsにvueコンポーネントを定義します。
resources/js/app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('laravelvue', require('./components/LaravelVue.vue').default);
const app = new Vue({
el: '#app',
});
- app.jsに定義したvueコンポーネントを resources/views/welcome.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>laravelvue</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div id="app">
<laravelvue></laravelvue>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
コンパイルのたびにnpm run devするのは、面倒くさいので
vueファイルの記述が変更されるたびに自動でコンパイルしてくれるnpm run watch
を実行します。
#コンパイル
npm run watch
command + Tで新しくタブを作ってサーバーを立ち上げます。
#サーバーを立ち上げて確認
php artisan serve
表示されました！
もう一度vueファイルの記述を変更してみましょう。
resources/js/components/LaravelVue.vue
<template>
<div>
<h1>LaravelでVueを実装できた！！</h1>
<p>Yeah!!</p>
</div>
</template>
npm run watchで監視されているので、vueファイルの記述に変更があると自動的にコンパイルをしてくれます。
ブラウザを更新してみましょう！
更新されています。
かんたんでは、ありますが少しでも参考になれば幸いです。