Complete logic decoupling with Vuex - vue.js

Question

I'm building a Vue web application with Vue Router and Vuex, using vue-cli for scaffolding. The majority of the project structure is very simple, with one main store and simple routing:
project/
├── src/
│ ├── components/
│ │ ├── Hosting/
│ │ └── Website/
│ ├── router/
│ ├── store/
│ ├── App.vue
│ └── main.js
└── index.html
The Hosting component, routed at /hosting, needs to be decoupled from the rest of the website. That URL will host a component that will be loaded on other websites using an <iframe>. What's the best way to accomplish this logic decoupling? I'd thought about including a store directory in the Hosting folder, but wasn't sure how to inject that into the Hosting root component. I looked into using modules, but this doesn't really accomplish what I want since all of the modules are accessible from every component.
Note that I don't actually need the /hosting endpoint to use the same routing as the rest of the website, since it will only ever be accessed as the src of an <iframe>. So if I need to do something with how webpack compiles the project (like creating a hosting.html target in addition to index.html), I could do that.

Answer 1

You can consider the answer that Joachim gave you, I mean split to 2 apps, and I am doing it on my application (providing the configuration on webpack)
webpack.config.js
...
entry: {
'./app-1.js': './src/app1/main.js',
'./app-2.js': './src/app2/main.js'
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/build/',
filename: '[name]'
},
...
If you need to access the same store from both apps, I think you should re-consider the modules solution in vuex. I am splitting my store into modules and load the wanted modules in each application (in App.vue in the beforeCreate lifecycle hook). Looks something like this:
main1.js
import Vue from 'vue'
import App from './App.vue'
import { store } from '../store/store';
new Vue({
el: '#app2',
store: store,
render: h => h(App)
});
main2.js
import Vue from 'vue'
import App from './App.vue'
import { store } from '../store/store';
new Vue({
el: '#app1',
store: store,
render: h => h(App)
});
(please note that both apps load same store)and then:
App1.vue
export default {
...
beforeCreate() {
// this is where we add dynamically specific modules used on this app.
const store = this.$store;
const modulesToBoDynamicallyRegistered = {
[Types.module1.TYPE_NAME]: module1,
[Types.module2.TYPE_NAME]: module2,
[Types.module3.TYPE_NAME]: module3,
[Types.module4.TYPE_NAME]: module4,
};
Object.keys(modulesToBoDynamicallyRegistered).forEach((moduleName) => {
utils.registerModuleIfNotExists(store, moduleName, modulesToBoDynamicallyRegistered[moduleName]);
});
},
...
}
App2.vue
export default {
...
beforeCreate() {
// this is where we add dynamically specific modules used on this app.
const store = this.$store;
const modulesToBoDynamicallyRegistered = {
[Types.module7.TYPE_NAME]: module7,
[Types.module9.TYPE_NAME]: module9,
};
Object.keys(modulesToBoDynamicallyRegistered).forEach((moduleName) => {
utils.registerModuleIfNotExists(store, moduleName, modulesToBoDynamicallyRegistered[moduleName]);
});
},
...
}
the store itself holds the common modules:
store.js
import Vue from 'vue';
import Vuex from 'vuex';
import module5 from './modules/module5/index';
import module6 from './modules/module6/index';
Vue.use(Vuex);
export const store = new Vuex.Store({
modules: {
module5,
module6,
}
});
if you need the registerModuleIfNotExists function:
registerModuleIfNotExists: (store, moduleName, module) => {
if (!(store && store.state && store.state[moduleName])) {
store.registerModule(moduleName, module);
} else {
// re-use the already existing module
throw `reusing module: ${moduleName}`;
}
},

Answer 2

Consider the Hosting component as a completely separate app would give you the freedom to host it on other sites as well. So yes, create a hosting.html page to show in the iframe and in other sites.
That would make your own usage of the component align completely with how it is hosted on other sites and make finding bugs easier as well.
You did not mention if the hosting component requires any data or parameters from the containing structure, but if so, you should provide this in the query string of hosting.html.