How to prerender a Vuejs 3 application with Vue Cli?-CodePudding

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

Thanks for your help.

CodePudding user response：

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.

CodePudding user response：

I tried to migrate my current vuejs 3 project to Nuxt 3 and it's more difficult that I believed.

First I tried to use :

export default defineNuxtConfig({
css: [
    '~/assets/scss/_variables.scss',
    '~/assets/scss/my-style.scss'
]

})

But it seems that my variables are not found in the project, I have some errors.

Next I tried to use sass-mq to be able to have differents styles depending the device, seems not working, but maybe it's due to the errors about scss.

My next problem it's to now if something exist to remplace the

<transition name="fade" mode="out-in">
    <component :is="Component" />
  </transition>

That I have in my vuejs project to have a fade effect when I change the page. But it's not a blocking point.

And last point, I finish to create 3 simples pages, to test the SSG/prerendrering, for that I try npm run build and nmp run generate, and I'm not sure that a works fine.

What should i get ? 3 html files ? I just have an index.html for now...

Do you have ideas ? Thanks and nice weekend.