PreRender only certain Pages in Vue or Nuxt project for SEO

Question

I'm planing a new Project with Vue or Nuxtjs. I want to use Firebase Auth/functions/storage/firestore as a backend so hosting on firebase would be also nice. I would love to use Vuetify too.

The Landingpage, About, Contact have to be easy index-able by Google but the application after the user login is irrelevant for SEO.

I think prerendering would be the best and easiest solution. So I tested some examples but did not manage to render only certain Pages pre.

I used prerender-spa-plugin to choose the Routes but after running nuxt build and deploy to firebase all Routes are preRendered.

The Nuxt App is running in universal mode:

  mode: 'universal',

To configure Webpack I used this in the nuxt.config.js:

plugins: [
            new HtmlWebpackPlugin({
                template: './public/index.html',
                inject: false
            }),
            new PrerenderSPAPlugin({
                staticDir: path.join(__dirname, './dist'),
                routes: ['/', '/about'],
            })
        ],

Deployed Version can be found here.

I thought, if I'm running nuxt build and deploying the dist folder, only the / and /about should be prerendered and the rest should act like a normal SPA.

Is this the way to go to build an App which is SEO friendly on the landing pages but a spa after the users login?

Davisdavison

Have you found an answer to this? I'm in the boat. – Sombrous

me too, we are all in the same boat. – Brummell