LaravelとNUXTを使ったプロジェクトの準備
Laravel側
プロジェクトの作成
laravel new ${プロジェクト名}
laravel new synapse_laravel
バージョンを指定する場合
$ composer create-project ”laravel/laravel=6.*” synapse_laravel
サーバーを起動
cd synapse_laravel php artisan serve
API作成
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
と表示されていたら成功!!