laravelとnuxt.jsの連携
勉強中の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 serveNuxt.jsのプロジェクト作成
$ npx create-nuxt-app <project-name>npxまたはyarnを使ってインストールします。
詳しくはドキュメントを参照。
インストールの後に色々聞かれます。とりあえずすぐに使うのでaxiosは選ぶようにしましょう。
私はこの時axiosを選んだつもりでしたが、つもりなだけで選べていなかったのかこの後エラーが発生したので別でaxiosをインストールしました。
$ npm install --save @nuxtjs/axiosnuxt.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 devhttp://localhost:3000 にアクセスしましょう。
これでAPI連携ができました！
参考
書籍はこちらを使って勉強しています。
laravelはこちら。laravel6を使っていますが、ドキュメントと併読しています。
基本となるvue.jsを勉強するのはこの１冊のみ使用しています。
いいなと思ったら応援しよう！
