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

環境のスペック

  • Laravel

    • 5.5

  • Vue.js

    • ^2.1.10

  • Nuxt.js

    • ^1.0.0-rc11

Laravelのインストール

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

1

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

環境の設定

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

1
2

rm -rf resources/assets/
rm package.json

Nuxt.jsのインストール

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

1

yarn add nuxt

環境の設定

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

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

1
2
3

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

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

1
2
3
4
5
6
7
8

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

1
2
3

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

起動の確認

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

1
2
3
4
5

# Laravel
php artisan serve

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

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

Laravelとの通信

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

Laravel 側

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

route/api.php

1

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

Nuxt.js側

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

1

yarn add @nuxtjs/axios

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

1
2
3
4
5
6
7
8
9

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

  axios: {
  }
}

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

client/pages/index.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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

これで、APIと連携できるようになりました。

まとめ

Laravel,Nuxt.jsを使うことで、簡単にクラサバの構成を実装できるようになりました。 次回以降はそれぞれの機能を使った、より深い実装について書いてみようかと思います。