Question 22469 in SEO Question posted in
Some basic information to get you started with this can be found here.

How to prerender a Vue3 application? – SEO

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?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search