LaravelとNUXTを使ったプロジェクトの準備

Laravel側

プロジェクトの作成

laravel new ${プロジェクト名}

laravel new synapse_laravel

バージョンを指定する場合

$ composer create-project ”laravel/laravel=6.＊” synapse_laravel

サーバーを起動

cd synapse_laravel
php artisan serve

API作成

routes/api.phpファイルを編集

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

http://localhost:8000/apiに接続するとhelloworldと表示

NUXT側

プロジェクトの作成

npm create-nuxt-app ${プロジェクト名}

npx create-nuxt-app synapse_nuxt

@nuxtjs/axiosの導入

cd synapse_nuxt
npm install --save @nuxtjs/axios

nuxt.config.jsファイルを編集してmodulesに"@nuxtjs/axios"を追記する

modules: [
  "@nuxtjs/axios"
],

サーバーを起動

yarn run dev

http://localhost:3000/に接続するとロゴの下にsynapse_nuxtと表示

API使用

page/index.vueファイルを編集

<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">
        {{ data }} //synapse_nuxtを編集
      </h1>
      // 省略
    </div>
  </div>
</template>

<script>
export default {
  async asyncData(app) { //ページコンポーネントがローディングされる前に呼びされる
    const data = await app.$axios.$get('http://localhost:8000/api')
    return {
      data
    }
  }
}
</script>

http://localhost:3000/に接続するとロゴの下にhelloworldと表示されていたら成功！！