Laravel に Nuxt.js プロジェクトを入れたい

Laravel に Nuxt.js プロジェクトを入れたい。

Nuxt.js の SSR は使わないものの、 Laravel の機能を API のみに閉じ込めて、完全に静的なクライアントで運用したいときなど。

生 Vue.js でも良いのだけど、置くだけ認識の Router/Vuex はかなり楽。

環境構築

$ laravel new myProject 
$ cd myProject 
$ vue init ~~~~~ myNuxt
$ mv myNuxt resouces/nuxt.js
$ rm package.json
$ mv resources/nuxt.js/package.json package.json
$ mv resources/nuxt.config.js nuxt.config.js

nuxt.config.js に次のような変更を

module.exports = {
  ....
  srcDir: "resources/nuxt.js/",
  ....
}

ひとまずコレで Nuxt が動くようになる。

Laravel APIを Proxy する

@nuxtjs/proxy を使って、 Laravel のAPIをProxy する。

$ npm i @nuxtjs/proxy

nuxt.config.js に次のような変更を

module.exports = {
  modules: [
    '@nuxtjs/proxy'
  ],
  proxy:{
    '/api' : "http://localhost:8000"
  }
}

php artisan serveで立てたサーバが /api パスのリクエストを受け取れるようになる。

ビルド設定

このままではビルドしても Nuxtアプリケーションしか立ち上がらない。

まずは、nuxt.js のstatic フォルダの中に Laravel の public フォルダの中身を全部ぶち込む

これでとりあえず、 Laravel のファイルが generate 時に dist の中に生成されるようになる。

server 側での公開パスも dist を設定してやると良い。

あとは apatch の設定。 generate するので問題ないかもしれないが 404 系を Laravel が受け取るような設定になっているはずなので、 そのへんは API でよしなにする。
(単純に index.html側に向けるとAPIが動かなくなるので注意)

index.html が index.php より優先されるように設定しないと、Laravel の Welcome page が表示されるのでそのへんも注意。

サブディレクトリでのホストが可能であれば、 generate を public/app の中に…みたいなことも出来るが、多分画像とかのパスの設定とかおかしくなりそう。