CODEWITHSUNDEEP
vue.jsnuxt.jsvuejs3prerendernuxt3.js
Nicolas KONDRATEK
Nicolas KONDRATEK

Reputation: 93

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?

Upvotes: 4

Views: 7866

Answers (3)

kissu
kissu

Reputation: 46604

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).
There is also vite-plugin-ssr that could be used.
Even AstroJS could be used in conjunction with Vue, since it's quite server-first focused.

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.

Upvotes: 4

chie
chie

Reputation: 291

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

Upvotes: 1

Nicolas KONDRATEK
Nicolas KONDRATEK

Reputation: 93

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.

Upvotes: 0

Related Questions