How to create two separate vue apps in Laravel?

Question

Vue.js

I think for many the situation is familiar:
there is an organization's website with information that is indexed by search engines and there is a personal account that provides quite a wide functionality.
I do not exclude that I have a mess in my head now, but I am trying to understand how these two parts can be divided into two applications so that the site itself does not load for a long time. For now, I'm building the site itself in blade templates, and LC in vue, but I would like to consider the implementation of the site in vue, but as a separate application from the LC.
Unfortunately, I did not find anything about this in the Inertia documentation. Or I was looking in the wrong place ...

Do you use the practice of such a division and how expedient is it to use vue for layout of the information sections of the site, where loading speed is important?

Answer 1

What is the problem? Make two patterns. One for the admin, the other for the front.

Answer 2

Create a new vue.config.admin.js config with another entry:

const path = require('path');

module.exports = {
  publicPath: '/',
  outputDir: path.resolve(__dirname, '../public/front/admin'),
  filenameHashing: false,
  css: {
    extract: true,
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.join(__dirname, 'src'),
      },
    },
    entry: {
      app: path.join(__dirname, 'src', 'admin/app.ts'),
    },
  },
};

Add to package.json:

"scripts": {
    "build:app": "env VUE_CLI_SERVICE_CONFIG_PATH=\"$PWD/vue.config.js\" vue-cli-service build",
    "build:auth": "env VUE_CLI_SERVICE_CONFIG_PATH=\"$PWD/vue.config.admin.js\" vue-cli-service build",
    "build": "npm run build:app && npm run build:auth",
  },

Thus, in src/admin, you can store everything related to the personal account, and the application itself in src. In this case, you can fumble the components between them.