How to prerender a Vue3 application?

user_10938869 0
Viewed 970

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?

prerender nuxtjs3 nuxt.js vuejs3 vue.js
3 Answers

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.

user_88165850

I struggled with the same error output until I found the prerender-spa-plugin-next. Then I notice the latest version of prerender-spa-plugin was published 4 years ago and prerender-spa-plugin-next is continually updating. It seems like that prerender-spa-plugin-next is a new version of prerender-spa-plugin with the same functions. So I use prerender-spa-plugin-next instead of prerender-spa-plugin then everything works fine!

Here is my step:

  1. install the package
npm i -D prerender-spa-plugin-next
  1. modify vue.config.js like
const plugins = [];

if (process.env.NODE_ENV === 'production') {
  const { join } = require('path');
  const PrerenderPlugin = require('prerender-spa-plugin-next');

  plugins.unshift(
    new PrerenderPlugin({
      staticDir: join(__dirname, 'dist'),
      routes: ['/'], //the page route you want to prerender
    })
  );
}


module.exports = {
    transpileDependencies: true,
    configureWebpack(config) {
        config.plugins = [...config.plugins, ...plugins];
    },
};
  1. build
npm run build

Then check the index.html under the dist folder you can see the page is prerendered.

Further usage refers to the homepage of prerender-spa-plugin-next

user_71091720

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.

user_109388690
Related