0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

Organization

カルネージハートとは特に関係のない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年に発売以降続編の情報が皆無ですが、一部の熱狂的ファンは大会を開催してゲームを続けています。ゲームを盛り上げることで続編も出るかもしれません。カルネジスト、ネジらーの皆様のご協力をお願いします!

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?