How to prerender a Vuejs 3 application with Vue Cli?

Hello !

I try without success to apply a prerendering (or a SSG) to my VueJs 3 application to make it more SEO friendly.

I found the vue-cli-plugin-prerender-spa, and when I try it with the command line : vue add prerender-spa I have the error : ERROR TypeError: Cannot read properties of undefined (reading ‘endsWith’)

After that I try prerender-spa-plugin but I have an error wheh I make a npm run build :
[prerender-spa-plugin] Unable to prerender all routes!

ERROR Error: Build failed with errors.
Error: Build failed with errors.
at /Users/myusername/Workspace/myproject/node_modules/@vue/cli-service/lib/commands/build/index.js:207:23
at /Users/myusername/Workspace/myproject/node_modules/webpack/lib/webpack.js:148:8
at /Users/myusername/Workspace/myproject/node_modules/webpack/lib/HookWebpackError.js:68:3

What do you think about this ? Do you have any idea ?

Thanks for your help.

Hello sir
The pre-rendering option needs a configuration first before running. After Installing the package you have to configure some options in the vue.config.js

module.exports = {
pluginOptions: {
prerenderSpa: {
registry: undefined,
renderRoutes: [
'/',
'/about'
],
useRenderEvent: true,
onlyProduction: true,

headless: false, // <- this could also be inside the customRendererConfig
customRendererConfig:
{
args: ["--auto-open-devtools-for-tabs"]
}
}
}
}

in the “renderRoutes” add your list of routes by separting them in comma.

Sorry, I’m not sure to understand if you answer about vue-cli-plugin-prerender-spa or about prerender-spa-plugin

I re try to install first prerender-spa-plugin, then change the configuration like this :

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
css: {
loaderOptions: {
scss: {
additionalData: `
@import "~@/scss/_variables.scss";
@import "~@/scss/my-style.scss";
`
}
}
},
pluginOptions: {
i18n: {
locale: 'fr',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: false
},
prerenderSpa: {
registry: undefined,
renderRoutes: [
'/',
'/first-page',
'/second-page'
],
useRenderEvent: true,
onlyProduction: true,

headless: true,
customRendererConfig:
{
args: ['--auto-open-devtools-for-tabs']
}
}
}
})

Build not produce errors, but there is nothing generated.

Maybe I miss something ?

Thanks.

Hi @nkondratek
The package works fine for me. If you want to know the problem you have to check the console log and decide. so may be could you send the screen shot of the console log.

Hi @AddWeb_2012

Thanks for your answer.

You can find my logs just here :

npm run build

> myproject@0.1.0 build
> vue-cli-service build

All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


⠙  Building for production...[prerender-spa-plugin] Unable to prerender all routes!


 ERROR  Failed to compile with 1 error                                                                         12:33:20

 error  

[prerender-spa-plugin] Unable to prerender all routes!

 ERROR  Error: Build failed with errors.
Error: Build failed with errors.
    at /Users/nicolas/Workspace/myproject/node_modules/@vue/cli-service/lib/commands/build/index.js:207:23
at /Users/nicolas/Workspace/myproject/node_modules/webpack/lib/webpack.js:148:8
at /Users/nicolas/Workspace/myproject/node_modules/webpack/lib/HookWebpackError.js:68:3
at Hook.eval [as callAsync] (eval at create (/Users/nicolas/Workspace/myproject/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/nicolas/Workspace/myproject/node_modules/tapable/lib/Hook.js:18:14)
at Cache.shutdown (/Users/nicolas/Workspace/myproject/node_modules/webpack/lib/Cache.js:150:23)
at /Users/nicolas/Workspace/myproject/node_modules/webpack/lib/Compiler.js:1225:15
at Hook.eval [as callAsync] (eval at create (/Users/nicolas/Workspace/myproject/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/nicolas/Workspace/myproject/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.close (/Users/nicolas/Workspace/myproject/node_modules/webpack/lib/Compiler.js:1218:23)

Thanks.

Hi @nkondratek
can you share the code?

What do you want exactly ? All the project ?

If you want to have a look yes, I can share you privately ?