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>

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

まとめ

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

勉強会

Laravel, Vue.jsの勉強会を開催致します!
興味ある方はご参加よろしくお願いいたします。

https://laravue.connpass.com/event/70674/

株式会社SCOUTER's job postings
Anonymous
10606361 771409569639589 9097227756287726017 n
A8631718 ec5e 4aac b00a f8e9366f4841?1507098231
Bb291fa4 0ab8 472f b8da f54bf3b7be7d?1542365396
3 Likes
Anonymous
10606361 771409569639589 9097227756287726017 n
A8631718 ec5e 4aac b00a f8e9366f4841?1507098231
Bb291fa4 0ab8 472f b8da f54bf3b7be7d?1542365396
3 Likes

Weekly ranking

Show other rankings

Page top icon