LaravelとNuxt.jsを同一レポジトリで管理するときの構成

こんにちは、SCOUTERの id:kotamat です。最近新しいプロジェクトにて、Laravel + Nuxt.jsの構成でアプリケーションを作成し始めたので、その構成を簡単にまとめてみます。

環境のスペック

Laravel
- 5.5
Vue.js
- ^2.1.10
Nuxt.js
- ^1.0.0-rc11

Laravelのインストール

まずは、基軸となるLaravelのインストールから。 composerが入っていれば下記コマンドを実行するだけです。

composer create-project laravel/laravel <プロジェクト名> "5.5"

環境の設定

Laravelではデフォルトで、Vue.jsをサポートしていますが、デフォルトで入っている.vueファイルは、Nuxt.js仕様にはなっていないので、不要なディレクトリを削除します。また、デフォルトで入っているpackage.jsonも不要なので削除します。

rm -rf resources/assets/
rm package.json

Nuxt.jsのインストール

つぎに同じディレクトリにNuxt.jsを導入します。インストール自体は下記で完了します。

yarn add nuxt

環境の設定

Nuxt.jsはデフォルトだと、同一ディレクトリにファイルを展開してしまい、Laravelのディレクトリ構成と被ると可視性が下がるため、ディレクトリを切ってその中にファイルを展開します。今回はディレクトリ名をclientとし、作成してみます。

まず、Nuxt.jsでの設定ファイルであるnuxt.config.js を作成し、その中に下記の設定を書きます。

module.exports = {
  srcDir: 'client/',
}

次に、Nuxt.jsが提供しているディレクトリを作成していきます。

install -d client/pages/.gitkeep
install -d client/assets/.gitkeep
install -d client/components/.gitkeep
install -d client/layouts/.gitkeep
install -d client/middleware/.gitkeep
install -d client/plugins/.gitkeep
install -d client/static/.gitkeep
install -d client/store/.gitkeep

まず挙動確認のため、pagesにファイルを作成します

/client/pages/index.vue

<template>
  <div>HelloWorld</div>
</template>

起動の確認

Laravel側とNuxt.js側で下記のコマンドを実行することで、アプリケーションを立ち上げる事ができます。

# Laravel
php artisan serve

# Nuxt.js
./node_modules/.bin/nuxt

http://localhost:3000 にアクセスすると、HelloWorldが出ていることを確認できるかと思います。

Laravelとの通信

今回はLarvelとaxiosを使って通信してみます。

Laravel 側

Laravel側ではまず、簡単なエンドポイントを作成してみます。

route/api.php

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

Nuxt.js側

Nuxt.jsにはモジュールというものがあり、nuxt-communityには便利なモジュールが提供されています。その中にaxios-moduleがあるので、そちらを使ってみましょう。

yarn add @nuxtjs/axios

モジュールの追加にはnuxt.config.jsへの追加が必要です。

module.exports = {
  srcDir: 'client/',
  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
  }
}

次に先程作成したindex.vueを下記のように変更します

client/pages/index.vue

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