Scenario:
In the process of developing a Vue SPA, I have opted to store most of my content in a json file during the application build (with the ability to serve different content based on environment variables). Now, the challenge is integrating this json file data into my vue router!
The issue at hand is that the route gets defined before the json content becomes available. Despite going through various suggested solutions, I haven't been able to make any of them work...
Snippet:
Here's a stripped-down excerpt of my code to provide insight into my current configuration:
Starting with my main application file app.js:
Vue.use(VueRouter);
new Vue({
el: '#app',
store,
router,
methods: {
async storeStaticContent() {
// Fetching the content and storing it in the Vuex store.
const response = await fetch(`/static/content.json`);
const json = await response.json();
this.$store.commit(MUTATIONS.SET_CONTENT, json);
},
},
created() {
this.storeStaticContent();
},
});
Next up is my router setup in router.js:
export const router = new VueRouter({
mode: 'history',
routes: [
{
path: `/${store.getters.mainEntity}`,
name: store.getters.mainEntity,
component: EntityPage,
},
{
path: '/*',
name: 'not found',
component: NotFound,
},
}
],
base: '/',
fallback: true,
});
Lastly, two relevant lines from package.json indicating the versions being used:
"vue": "^2.6.10",
"vue-router": "^3.1.3",