laravelとnuxt.jsの連携

AK＠旅とプログラミング

2020年9月26日 17:34

勉強中のlaravelとnuxt.jsを使ってアプリケーションを開発します。その第一歩となるlaravelのAPIとnuxt.jsの連携の過程をまとめました。nuxt.jsメインでまとめていきます。

開発環境

laravel 6.18.4
nuxt.js 2.14.6
今回リポジトリは別々で管理していきます。

laravelでAPI作成

まずはlaravelのプロジェクトを立ち上げます。詳しくはドキュメントを参照。

フロントエンド側と通信するためシンプルなAPIを作成します。
routes/api.php

Route::get('/', function () {
   return 'hello world';
});

hello worldの文字列を返すAPIを作成しました。ターミナルでサーバーを立ち上げておきます。

$ php artisan serve

Nuxt.jsのプロジェクト作成

$ npx create-nuxt-app <project-name>

npxまたはyarnを使ってインストールします。

詳しくはドキュメントを参照。

インストールの後に色々聞かれます。とりあえずすぐに使うのでaxiosは選ぶようにしましょう。
私はこの時axiosを選んだつもりでしたが、つもりなだけで選べていなかったのかこの後エラーが発生したので別でaxiosをインストールしました。

$ npm install --save @nuxtjs/axios

nuxt.config.jsへ追加が必要です。

nuxt.config.js

modules: [
   '@nuxtjs/axios',
 ],

APIを使う

nuxt.jsを書き換えていきます。(このnoteでは触れませんがvuetifyもインストールしてあります。)

pages/index.vue

<script>
 import Logo from '~/components/Logo.vue'
 import VuetifyLogo from '~/components/VuetifyLogo.vue'

 export default {
   components: {
     Logo,
     VuetifyLogo
   },
   async asyncData({ app }) {
     const data = await app.$axios.$get('http://localhost:8000/api')
     return {
       data
     }
   }
 }
</script>

asyncDataメソッドはサーバーサイドでデータを取得し、レンダリングしてくれます。

受け取ったオブジェクトはtemplateの内側で{{ }}で表示することができます。

<v-card-title class="headline">
   {{data}}
</v-card-title>

サーバーを立ち上げて確認します。

$ npm run dev

http://localhost:3000 にアクセスしましょう。

これでAPI連携ができました！

参考

書籍はこちらを使って勉強しています。
laravelはこちら。laravel6を使っていますが、ドキュメントと併読しています。

基本となるvue.jsを勉強するのはこの１冊のみ使用しています。

サポートしていただけるとこれからも続ける励みになります！書籍購入などに使わせていただく予定です！何卒よろしくお願いします^^