Search code examples
vue.jsnuxt.jsvuejs3prerendernuxtjs3

How to prerender a Vue3 application?


I try without success to apply a prerendering (or a SSG) to my Vue3 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 tried prerender-spa-plugin but I have an error when 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?


Solution

  • Nuxt3 is a really powerful meta-framework with a lot of features and huge ecosystem. Meanwhile, it's in RC2 right now so not 100% stable (may still work perfectly fine).
    If your project is aiming for something simpler, I'd recommend using Vitesse. It may be a bit more stable and it's probably powerful enough (check what's coming with it to help you decide).

    Some solutions like Prerender also exist but it's paid and not as good as some real SSG (/SSR). Also, it's more of a freemium.