Create multiple Vue Applications with (some) shared source-files (components/store/mixins/etc)
It is easily possible to share resources across multiple Vue-Apps simply by importing the respective resource everywhere you would like to use it, e.g.:
// in /components/MyComponent.vue
<template>
<div>I'm a shared component</div>
<template>
// in /user-app/entry.js
import MyComponent from '../components/MyComponent';
Vue.component('MyComponent', MyComponent);
new Vue({...})
// in /admin-app/entry.js
import MyComponent from '../components/MyComponent';
Vue.component('MyComponent', MyComponent);
new Vue({...})
Where it becomes a little bit complicated
To actually create the seperate apps you will have to use some built-process. By far the most common tool to build Vue apps (and the one used by VueCLI & Nuxt) is WebPack.
To create multiple apps with WebPack you need to do one of two things:
simply use the integreated build-processes of the VueCLI and Nuxt separately. It will work out of the box.
create your own WebPack configuration & the EntryPoint of every single app in WebPack's configuration. NOTE: It is not trivial to use your own build-process for Nuxt, if you really want to use Nuxt I advice you against it. Run with two seperate build-processes instead.
The WebPack configuration itself is a JavaScript Object. The relevant key to declare your EntryPoints is sensibly called entry. Here you specify the name of your EntryPoint and the corresponding path (the path to the entry-file).
The 'Pages' feature of the VueCLI uses this under the hood. However, I believe it is very well worth it to learn how to use WebPack yourself. It is not that complex and will significantly benefit most or all of your JavaScript projects.
A basic example configuration could look like this:
// in webpack.config.js
module.exports = {
mode: 'development',
entry: {
admin: path.resolve(__dirname, './admin-app.js'),
user path.resolve(__dirname, './user-app.js'),
},
// other config
}
WebPack is very well documented: https://webpack.js.org/concepts/
