背景

Nuxt.jsで動いているSPAアプリをVue.jsに解体してほしい的な話があり、部分部分をTipsとして投稿します。
APIはLaravel(6.x)です。なおLaravelとNuxt.jsは同一リポジトリです(なぜ)
Nuxt.jsは2.9。Vueは2.6.10
今回はJavaScriptコンパイル編です。

LaravelのディレクトリにNuxtのプロジェクトを移行

resources/jsにNuxtのプロジェクトをそのまま移行します

下記のようなディレクトリ構造になります。

resources/js
├── assets
├── components
├── layouts
├── pages
├── plugin
└── store

webpack.mix.jsにaliasを設定する

Nuxt.jsのモジュールのパスの指定は相対パスではなくaliasを設定してパスを設定しています。
webpack.mix.jsにデフォルトではそんな機能はないので設定します。

webpack.mix.js

const mix = require('laravel-mix');

const path = require('path');
mix.webpackConfig({
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '~': path.resolve(__dirname, 'resources/js/'),
    },
  },
})

resources/js/app.jsを作成する

VueやVue Routerなどの読み込み設定ファイルを作成します。

resources/js/app.js

import Vue from "vue";
import router from '~/router'
import App from '~/App.vue'

new Vue({
  router: router,
  render: h => h(App),
}).$mount('#app')

resources/js/App.vueを作成する

レンダリングするVueファイルを作成し、resources/js/layouts/default.vueを読み込みます。

resources/js/layouts/default.vue

resources/js/App.vue

<template>
  <div id="app">
    <layout />
  </div>
</template>

<script>
import Layout from '~/layouts/default'

export default {
  components: {
    Layout
  }
};

resources/js/layouts/default.vueを編集する

をに変更します。

resources/js/layouts/default.vue

<template>
  <div>
    <router-view />
  </div>
</template>

resources/js/router.jsを作成する

ルーティングは自動生成されないので手動で設定します。

resources/js/router.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '~/pages/index'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index,
    },
  ],
});

package.jsonの編集

Laravel-Mixが使えるようにnpm scriptsを編集します。
Laravel-Mix公式ドキュメントよりスクリプトを参照しています。

package.json

  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
   },

webpack.mix.jsの編集

resources/js/app.jsのコンパイルを設定します。

webpack.mix.js

const mix = require('laravel-mix');

const path = require('path');
mix.webpackConfig({
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '~': path.resolve(__dirname, 'resources/js/'),
    },
  },
})

mix.js('resources/js/app.js', 'public/js')

必要なnpmモジュールをインストール

$ npm install cross-env vue vue-router laravel-mix --save-dev

コンパイル

$ npm run dev

JavaScriptのコンパイルは通るはずです。（画面確認時にはコンソール上でエラーが出まくると思いますが）
プロジェクトによっては不足しているモジュールがあるかもしれません。随時追加してください。

画面で確認したい場合

Sassのコンパイルは未設定ですので、画面崩れまくりますが、画面確認したい時あるかもしれません。

Laravelのルーティングを編集

全部のルーティングをindex.bladeに集約します。

routes/web.php

Route::get('{any}', function() {
    return view('index');
})->where('any', '.*');

index.blade.phpの編集

index.blade.phpでapp.jsを読み込みます。

resources/views/index.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>~~~~</title>
    </head>
    <body>
      <div id="app">
      </div>
      <script src="{{ mix('/js/app.js') }}"></script>
    </body>
</html>

これで画面の確認は可能です。

Nuxt.jsをVue.jsに解体するTips(JavaScriptコンパイル編)

背景