reference: https://github.com/yyx990803/laravel-vue-cli-3

Vue CLI inside Laravel

lite version

inside the Laravel project folder, create a new Vue app

vue create frontend

create frontend/vue.config.js to config the build options

module.exports = {
  // where the production build files will be generated
  // remember to modify package.json and add "--no-clean" arg
  // to prevent the entire outputDir being cleaned during each build process
  outputDir: '../public',

  // static assets (js, css, img, fonts) output path
  // remember to modify build script to rm -rf old assets upon each build
  // because the "--no-clean" arg we need to manually select the clean targets
  // put assets in a separate folders to avoid rm -rf assets not belonging to this vue app
  // (relative to outputDir)
  assetsDir: 'assets/frontend',

  // index file path output path
  // (relative to outputDir)
  indexPath: process.env.NODE_ENV === 'production'
    ? '../resources/views/frontend.blade.php' // <-- key point, output the html as a blade
    : 'index.html',

  // proxy API requests to Valet during development
  devServer: {
    proxy: 'http://backend.test',
  },
};

⚠️make sure the first part of assetsDir (assets/frontend) is not the same as Laravel route path, otherwise Laravel would not able to serve the route when using php artisan serve

modify build script in frontend/package.json

"scripts": {
  "serve": "vue-cli-service serve",
- "build": "vue-cli-service build",
+ "build": "vue-cli-service build --no-clean",
+ "prebuild": "rm -rf ../public/assets/frontend/{js,css,fonts,img}",
  "lint": "vue-cli-service lint"
},

config Laravel route routes/web.php to resolve related view

Route::get('/frontend', function () {
    return view('frontend');
});

finally

cd frontend

rm -rf .git

cp ../public/favicon.ico public/favicon.ico

npm run build

npm run serve

if history mode is enabled, edit the base option in router.js according to the previous Laravel route path settings

export default new Router({
  mode: 'history',
- base: process.env.BASE_URL,
+ base: '/frontend/',
  routes: [
    ...
  ],
});

⚠️process.env.BASE_URL corresponds to the publicPath option in vue.config.js, but we don't use this value here because we won't modify the publicPath, instead we leave it with default value '/'. Because if we set publicPath to '/frontend/' Laravel would not able to serve the route when using php artisan serve

and add a universal fallback in web.php

Route::get('/frontend/{any}', function () {
    return view('frontend');
})->where(['any' => '.*']);

💡remember to edit .gitignore the for Laravel project to ignore compiled files

+ /public/assets
+ /resources/views/frontend.blade.php

Nuxt inside Laravel

basically, generate nuxt static dist into laravel and serve the dist like another public folder.

// frontend/package.json

{
  "scripts": {
    // ...

    "pregenerate:laravel": "rm -rf node_modules/.cache .nuxt dist ../backend/dist",
    "generate:laravel": "BASE_URL=/ BASE_DIR=/prefix/ PUBLIC_PATH=/ nuxt generate",
    "postgenerate:laravel": "mv -fv dist ../backend/dist"
  }
}

// frontend/nuxt.config.js

export default {
  // ...

  axios: {
    baseURL: process.env.BASE_URL || '/',
  },
  router: {
    base: process.env.BASE_DIR || '/',
  },
  build: {
    publicPath: process.env.PUBLIC_PATH || '/_nuxt/',
  },
  generate: {
    fallback: true,
  },

  // ...
};

// backend/routes/web.php

// ...

Route::get('/', 'HomeController@serveStatic');
Route::fallback('HomeController@serveStatic');

// backend/app/Http/Controllers/HomeController.php

use Illuminate\Http\Testing\MimeType;

// ...

class HomeController extends Controller
{
    public function serveStatic(Request $request)
    {
        $base = 'prefix'; // or ''
        $dist = 'dist';

        $path = base_path(($base ? $dist : "$dist/") . str_replace($base, '', $request->path()));
        $path = is_dir($path) ? "$path/index.html" : $path;

        return file_exists($path) ? response()->file($path, ['Content-Type' => MimeType::from($path)]) : abort(404);
    }
}

may reference: https://github.com/cretueusebiu/laravel-nuxt