Multiple Vue.js apps with a single backend

Hi, I have done this with a Laravel project. Yes, I would class this as an MPA. I don't think there is a single correct answer for what you're asking. Just find what works, by now, you probably already have.

Here's my answer, to the best of my ability trying to exclude Laravelisms. I hope it is helpful, but there are probably better ways.

Let's say you have a very large application and there are three different areas "Human Resources", "Safety Reports" and "Project Management". Each their own stand-alone application. People have argued with me that all of the Javascript for these should be in a single file because of "tree shaking" and other reasons I still don't understand because I'm too old.

If you don't want to listen to them, like me, you can have three different entry points on your back-end, and load a different Javascript file for each.

For structure I would use the following:

- /js/components/common/
- /js/components/containers/
- /js/components/shared/
- /js/app.js
- /js/bootstrap.js
- /js/vue-app.js

The way these works is anything in the common folder is automatically loaded, it is used across the entire application by default. Use this bit of code in app.js

const files = require.context('./components/common/', true, /\.vue$/i);
files.keys().map(key => Vue.component('App' + key.split('/').pop().split('.')[0], files(key).default));

and if you have a file in the "common" folder that looks like this: BigButton.vue it will be usable in your entire application by <app-big-button></app-big-button>. Change the syntax flavour however you like but I like having the 'app-' in front to know that it is global.

The containers folder has a folder for each application "human-resources", "safety" and "project-management" and each has a .js file with all of the specific Vue components used only for those applications. Basically just a big list of imports like this Vue.component('my-hr-component', require('./hr/Person.vue').default)

Use shared for anything that you may import as required which may be shared across some (but not all) applications. Like, say you had a safety chart that also appears on a human resources profile or something. Just an idea, it's totally up to you if you use this idea.

For webpack, I use Laravel Mix, so I don't know how helpful showing a solution there is but here's how I would do it for our example:

mix.js('resources/js/app.js', 'public/js')
  .js('resources/js/vue-app.js', 'public/js')
  .js('resources/js/components/containers/human-resources.js', 'public/js/human-resources.js')
  .js('resources/js/components/containers/safety.js', 'public/js/safety.js')
  .js('resources/js/components/containers/project-management.js', 'public/js/project-management.js');

This approach will probably have a better solution. A long time ago it was discussed here: https://laracasts.com/discuss/channels/vue/how-to-organisestructure-all-vue-components

You could probably find a better solution there.

@slothlike Thank you for your very detailed answer - especially for trying to separate it from Laravel. I will be using Nuxt.js for an upcoming application - the application that I was writing for this project is on indefinite hold. Webpack is used in Nuxt.js so the configuration will not be too different.

At the time I could not seem to get the idea out of my head that this would be the correct approach for a large application (write smaller sub apps that then combine to make the larger application).

The problem I had in the end was authentication and authorising the user as they swapped applications (the only way I could see was storing an authentication token in Vuex - however that would only work for one of the sub-apps). When the user goes to another app they are essentially unauthorised. I could not find a way to 'share' the Vuex store between applications.

I have seen forum threads on other sites that say if the sub apps are all on the same domain then you can use another type of authorisation - but I don't really understand how this works without token authorisation considering you are decoupling the frontend and backend.

I would like to have this figured out before my next project starts - as I think this approach scales better. At the moment I think the only to approach to the problem is to have one large Vue (or Nuxt) application.