前にLaravel+Reactの記事書いたけどLaravelだと最初から用意されてるVue.jsのほうがやっぱり楽…。
というかあの記事もすでに古い…React公式にあった日本語版チュートリアルが消えてる。
公式ドキュメントだけ見て使えないものは合わないと判断。
LaravelとVue.jsは公式（の日本語訳）だけですぐ使えた。
ReactはチュートリアルだけだったけどVue.jsはすでに実戦で使ってる。
環境
- Laravel 5.4.*
- Vue.js 2.2.*
新規の場合
LaravelはAPIとしてjson返すだけ+全面的にVue、が今は一番楽かな。
make:authで作るログイン機能部分だけは元のものを活かす形。
スマホアプリから使いたいとか外部からのログインはLaravel PassportでOAuth認証。
まぁ新規なら好きなようにできる。
既存プロジェクトへの導入
ここから本題。
例：APIで取ってきたデータを表示する部品を作る。
準備
旧バージョンからアップグレードしてきてる場合Vueは使ってないだろうから
package.json webpack.mix.js /resources/assets/js 辺りを最新のものに合わせる。
https://github.com/laravel/laravel
レイアウト用ファイルで全体を#appで囲む。
viewのどこでもVueコンポーネントが使える状態。
<body>
<div id="app">
...
</div>
</body>
CSRF Tokenのこの辺も必要。
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
API
ここは問題ないだろうからただのサンプル。
GET /api/posts
routes/api.php
Route::resource('posts', 'PostController');
PostController
public function index()
{
return Post::latest()->paginate(10);
}
Vueコンポーネント
やることは
1. /resources/assets/js/components/ にコンポーネントを作る。
2. app.jsで登録。
3. viewで使う。
以上。
/resources/assets/js/components/Post.vue
これもただのサンプル。
<template>
<ul>
<li v-for="post in posts">{{ post.title }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
posts: [],
}
},
mounted() {
axios.get('/api/posts').then(res => {
this.posts = res.data.data
}).catch(error => {
console.log(error)
})
}
}
</script>
/resources/assets/js/app.js
Vue.component('my-post', require('./components/Post'));
どこかのview
<my-post></my-post>
Vueが影響するのはこの範囲だけ。
コンポーネント単位で小さく導入できる。
その他
別にVueコンポーネント内でjQuery使ってもいい。
Laravel Passportでも使ってる。
すでにjQuery使ってるなら無理に排除する必要はない。
とはいえ複雑なことすると破綻するのであくまでも後から追加したVueから既存のDOMを操作したい時に1ヶ所だけ許可する、くらいに制限したほうがいい。
既存DOMも徐々にVueに置き換える。
Vuexは早めに使い出したほうがいい。
複数のコンポーネント間でデータを共有したくなったら導入していい。
イベントでやろうとするとたぶん早々に破綻。