'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?

vue.jsnuxt.jsvuejs3prerendernuxtjs3


Solution 1:[1]

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.

Solution 2:[2]

Found and fix about the scss files to import.

In nuxt.config.ts use :

vite: {
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `
                  @import "@/assets/scss/_variables.scss";
                  @import "@/assets/scss/my-style.scss";
                `
            }
        },
    },
}

Now my 2 mains issue are : how to install vuetify properly, currently syles and components seems working but the JS not, for example, accordions don't expands on click.

And second topic is to have a i18n module, it seems that vue-i18N no longer works.

Thanks.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Nicolas KONDRATEK

Related Questions