こんにちはhirokinishizawaです！
今回laravelにnuxtを追加したのですが、この三連休で自分が最終的に出来たこと出来なかったことを書いていこうかと思います。
nuxtを入れたことによって変更したファイル
viewファイル
resources
└── views
├── auth
│ ├── passwords
│ │ ├── email.blade.php
│ │ └── resets.blade.php
│ └── login.blade.php
│ └── register.blade.php
├── layouts
│ └── app.blade.php
└── posts
│ ├── create.blade.php
│ ├── delete.blade.php
│ └── edit.blade.php
├── home.blade.php
└── welcome.blade.php
こちらはcontrollerファイルからviewは呼び出さないので全て削除しました！
routes/web.php : routes/api.php
全てapi経由で使用するのでweb.phpにあったものは全てapi.phpに移行しました！
controllerファイル
controllerファイルはファイルごとに中身は少し変更していますが後ほど話そうかと思います！
出来たこと
nuxt導入
laravelにnuxt導入の仕方は以前 id:kotamatさんが書いてくれた「LaravelとNuxt.jsを同一レポジトリで管理するときの構成」を読んでもらえるとわかると思います！
記事を読んでもらえるとわかると思いますが、今回サーバーはlocalhost:8000フロントはlocalhost:3000で話していきたいと思います。
フロントでapi繋ぎ込み
以前までのlaravelだけでviewを表示しいていた/homeのcontrollerファイルはこのようになっていました。
<?php public function index(Request $request) { $user = $request->user(); $posts = $user->load('posts'); return view('home', ['posts'=>$posts->posts]); }
こちらでviewファイルであるbladeファイルをreturnしていましたが、今回api呼び出しをするのでこのようにしました
<?php public function index(Request $request) { $user = $request->user(); $posts = $user->load('posts'); return $posts->posts; }
なおvueファイルでapiを叩く際はこのようになっています！
<template> <div class="card" v-for="(fishingData, key) in data" :key="key"> <div class="card-header"> 日付：{{fishingData.year}}年{{fishingData.month}}月{{fishingData.day}}日 </div> <div class="card-body"> <div class="column"> <div class="fish_name">魚種：{{fishingData.fish_name}}</div> </div> <div class="column"> <div class="place">場所：{{fishingData.prefecture}}{{fishingData.place}}</div> </div> </div> </div </template> <script> export default { async asyncData({app}){ const data = await app.$axios.$get('http://localhost:8000/home') return {data}; }, } <script>
見た目はこんな感じです!
他にそれぞれページの表示やページ遷移は<nuxt-link>を使ったりで出来たのですが、axios-moduleを使用して記録を作成したり編集したりすることは出来ませんでした。
なにに詰まったか
user認証
まず最初にlaravelでやっていたユーザー認証をnuxtではどのようにするのかと疑問を持ったので調べて参考にした記事がこちらになります
そこでcomposer require laravel/passportを実行すると
Your requirements could not be resolved to an installable set of packages.
Problem 1
- Conclusion: don't install laravel/passport v4.0.3
- Conclusion: don't install laravel/passport v4.0.2
- Conclusion: don't install laravel/passport v4.0.1
- Conclusion: remove paragonie/random_compat v9.99.99
- Installation request for laravel/passport ~4.0 -> satisfiable by laravel/passport[v4.0.0, v4.0.1, v4.0.2, v4.0.3].
- Conclusion: don't install paragonie/random_compat v9.99.99
- laravel/passport v4.0.0 requires league/oauth2-server ^6.0 -> satisfiable by league/oauth2-server[6.0.0, 6.0.1, 6.0.2, 6.1.0, 6.1.1].
- league/oauth2-server 6.0.0 requires paragonie/random_compat ^2.0 -> satisfiable by paragonie/random_compat[v2.0.0, v2.0.1, v2.0.10, v2.0.11, v2.0.12, v2.0.13, v2.0.14, v2.0.15, v2.0.16, v2.0.17, v2.0.2, v2.0.3, v2.0.4, v2.0.5, v2.0.
6, v2.0.7, v2.0.8, v2.0.9].
- league/oauth2-server 6.0.1 requires paragonie/random_compat ^2.0 -> satisfiable by paragonie/random_compat[v2.0.0, v2.0.1, v2.0.10, v2.0.11, v2.0.12, v2.0.13, v2.0.14, v2.0.15, v2.0.16, v2.0.17, v2.0.2, v2.0.3, v2.0.4, v2.0.5, v2.0.
6, v2.0.7, v2.0.8, v2.0.9].
- league/oauth2-server 6.0.2 requires paragonie/random_compat ^2.0 -> satisfiable by paragonie/random_compat[v2.0.0, v2.0.1, v2.0.10, v2.0.11, v2.0.12, v2.0.13, v2.0.14, v2.0.15, v2.0.16, v2.0.17, v2.0.2, v2.0.3, v2.0.4, v2.0.5, v2.0.
6, v2.0.7, v2.0.8, v2.0.9].
- league/oauth2-server 6.1.0 requires paragonie/random_compat ^2.0 -> satisfiable by paragonie/random_compat[v2.0.0, v2.0.1, v2.0.10, v2.0.11, v2.0.12, v2.0.13, v2.0.14, v2.0.15, v2.0.16, v2.0.17, v2.0.2, v2.0.3, v2.0.4, v2.0.5, v2.0.
6, v2.0.7, v2.0.8, v2.0.9].
- league/oauth2-server 6.1.1 requires paragonie/random_compat ^2.0 -> satisfiable by paragonie/random_compat[v2.0.0, v2.0.1, v2.0.10, v2.0.11, v2.0.12, v2.0.13, v2.0.14, v2.0.15, v2.0.16, v2.0.17, v2.0.2, v2.0.3, v2.0.4, v2.0.5, v2.0.
6, v2.0.7, v2.0.8, v2.0.9].
- Can only install one of: paragonie/random_compat[v2.0.0, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.1, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.10, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.11, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.12, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.13, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.14, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.15, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.16, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.17, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.2, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.3, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.4, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.5, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.6, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.7, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.8, v9.99.99].
- Can only install one of: paragonie/random_compat[v2.0.9, v9.99.99].
- Installation request for paragonie/random_compat (locked at v9.99.99) -> satisfiable by paragonie/random_compat[v9.99.99].
Installation failed, reverting ./composer.json to its original content.
このようなエラーがでました。
その中のrandom_compatがv9.99.99になっていたので変だと思ったので2.0.0にしたところエラーが解消されました！
postするときのエラー
postするときaxios.post('http://localhost:8006/api/posts', this.foge)とやって作成ボタンを押すとNo 'Access-Control-Allow-Origin'のエラーが出てきました。
調べたところCORS対応が必要みたいです。今回は説明を省くのでこちらを参考にしてください。
最後に
laravelとnuxtでの記事が少なく参考を探すのが大変でした。次回はしっかり解決して解決策をかければと思います！
