I am facing an issue with asynchronously loading data in my Vue.js application's config for use with Chris Fritz's PrerenderSPA webpack plugin. It seems that the routes are not being pre-rendered as expected.
When I manually input the values, the routes are prerendered successfully. However, when trying to asynchronously load the webpackConfiguration, it fails.
This is a simplified version of my attempt:
const configPromise = new Promise(async (resolve, reject) => {
// API Fetch for Prismic Routes:
const blogRoutes = await prismicRoutes;
let renderRoutes = [
...generalRoutes,
...blogRoutes,
];
// call `resolve()` with the config object at some point
resolve({
pwa: {
name: 'App',
themeColor: '#000000',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/service-worker.js'
}
},
configureWebpack: {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: renderRoutes,
}),
],
},
});
});
module.exports = configPromise;
Is there a way to achieve this using something like:
async function exportConfig() {
module.exports = await configPromise;
}
exportConfig();
Has anyone successfully achieved asynchronous loading of the vue.config.js during build time?