カルネージハートとは特に関係のないNuxt.jsで静的生成したファイルをLaravelのBladeに組み込む方法

カルネージハート Advent Calendar 2019 10日目の記事です。

今回はカルネージハートとは全く関係ないNuxt.jsで静的生成したファイルをLaravelのBladeに組み込む方法の話です。

前提条件

• Laravel プロジェクト作成済み

事前準備

事前準備
npx @vue/cliをインストールする

$ npm i -g npx @vue/cli

LaravelにNuxt.jsのプロジェクトを突っ込む

Laravelのルートディレクトリから

$ npx create-nuxt-app nuxt

Nuxtのインストールが完了したら、Nuxtの設定関連ファイル群をLaravelのルートディレクトリに移動させる。

$ cd nuxt
$ mv .babelrc jest.config.js nuxt.config.js package-lock.json package.json ../

Nuxtに必要なモジュールを入れ直す

$ cd -
$ npm i

nuxt.config.jsを編集

nuxt.config.js

export default {
  srcDir: "nuxt",
  mode: "ssr",
  generate :{
    dir : "public/nuxt" //生成ディレクトリ指定
  },
・
・
・

静的ファイル生成

$ npm run generate

welcome.blade.php編集

・
・
・
@php 
  echo file_get_contents('nuxt/index.html')
@endphp
・
・
・

これで「/」でNuxt.jsで静的生成したファイルをLaravelのBladeに組み込めます！
index.html以外の静的ファイルのパスが異なるので、nuxt.config.jsのrouterオプションでパスをよしなに変更してください

最後に

事実上の最新作EXAが2010年に発売以降続編の情報が皆無ですが、一部の熱狂的ファンは大会を開催してゲームを続けています。ゲームを盛り上げることで続編も出るかもしれません。カルネジスト、ネジらーの皆様のご協力をお願いします！

カルネージハートファンのプログラミング知識を共有しましょう！