Vue-meta: nuxt generate and spa

[Machine-Maker]

So if I set mode: 'spa' in nuxt.config.js and use yarn(npm run) generate, the individual pages do not have the correct meta/title tags. Is this expected behavior? changing mode to 'universal' or just removing it makes the tags appear correctly.

[pimlie]

No, this is not ofc :)

Could you create a reproduction of the issue?

[Machine-Maker]

Sure, so just clone this repo https://github.com/panyana-research-group/panyana-research, run yarn to install packages, then you can run yarn generate to generate the static pages and look at the meta tags on a page, go into the nuxt.config.js and add mode: 'spa' (mode is universal by default) and see that the tags have changed.

[sts-ryan-holton]

I'm experiencing the same issue, I have mode: "spa" in my Nuxt JS site, and meta tags in my pages. They don't appear to be generated in the generated html files.

[JoshuaRobertson]

I've also experienced the same issue as above. The meta title displays correctly on the web page but isn't generated correctly in the page source.

export default {
  layout: 'pages',
  head() {
    return {
      title: 'FAQs | My Domain',
      meta: [
        {
          hid: 'description', name: 'description', content: 'Any questions about my domain'
        }
      ]
    };
  }
}

[manniL]

That's because it is not server-side rendered (either on the fly via mode: 'universal' or nuxt generate).

[sts-ryan-holton]

@manniL

In spa mode, I get a dist/ folder with generated static pages which I need to upload to my server, these pages should contain the generated meta title and description from the head () defined in each page.

When trying to switch my mode to universal and running npm run build && npm run generate afterwards, all of my pages appear to get an error in the console:

ReferenceError: window is not defined

In an earlier version of Nuxt JS (2.3.x) specifying mode: "spa"wasn't required, and thus meta titles and descriptions seemed to work in generated SPA mode. In newer versions of Nuxt JS >= 2.4.5 it appears that mode is required?

So if I set mode: 'spa' in nuxt.config.js and use yarn(npm run) generate, the individual pages do not have the correct meta/title tags.

As per @pimlie s comment, this isn't an error that should be happening?

No, this is not ofc :)

[pimlie]

@X1machinemaker1X thanks for the reproduction

Do you guys mean that:

• the generated files on disk do not have the meta information set you expect?
• or do you mean that after you open those files in the browser and inspect the source they dont have the correct meta information?

If its the first, then I believe thats expected behaviour for SPA mode (but in any case that would be a Nuxt.js issue, not a Vue-Meta issue). If its the second, do you have any js errors in the console?

@sts-ryan-holton It seems you are using some libs which expect to be run in a browser, have a look here how you can prevent those libs from being included on the server: https://nuxtjs.org/guide/plugins#client-side-only

[Machine-Maker]

@pimlie the generated files do not have the meta info that I expect. (which also means that inspecting the head doesn't as well)

[pimlie]

In that case I will close this issue as its not related to vue-meta.

But afaik that is just how Single Page Application mode is meant to work in Nuxt. Eg if you run nuxt generate in SPA mode and check the generated files (find dist -name '*.html' -exec md5sum {} \) then you will see that all the index.html files are exactly the same.

But ofc feel free to open an issue at: https://cmty.app/nuxt/nuxt.js :)

[satyavh]

But afaik that is just how Single Page Application mode is meant to work in Nuxt.

It makes sense, but it is very poorly documented. The docs refer to being able to set meta tags per page via head() {...}, and then run nuxt generate which will generate a static side and apply these tags. But it doesn't exactly do that if your mode is 'spa'.

[yaaax]

@satyavh I agree, documentation would certainly benefit from some clarifications.
From what I understand, in spa mode Nuxt only generates an "empty shell". Then the DOM gets hydrated with the page tags, thanks to javascript code.

I would have loved to "mix" spa, ssr, and generate modes, depending on the routes.
_(Please people tell me it makes no sense!)_

Maybe some nice things to come in the future?
👉https://github.com/nuxt/nuxt.js/issues/6467)

Smart SSR Module (stale-while-revalidate cache aka SPR and dynamic SSR/SPA switching)

@Atinux Is it possible to have a few pages – typically blog pages – rendered on the server side while the rest of the website is an SPA app? 🙏

[manniL]

@yaax this "kind of" works already, as described in my blog post.

A hybrid mode to have a mix of these three might be a thing in the future.

[yaaax]

Thank you @manniL for your feedback.
I've checked your blog post and it sounds very interesting!

My case was linked to a legacy app already developed in spa mode.
I've checked on CMTY: a few people reported that the meta tags are not correctly overridden by pages head method in spa mode. So I thought maybe I could patch this behaviour by having some pages rendered on the server (_ssr_), like "universal pages" exceptions.
I guess it's impossible to use the middleware to change the mode on the client side. Too late, isn't it?

I understand that currently the head method only works with universal and generate modes.

---

So my solution was to migrate from spa to universal.
I'm happy to have found what caused me trouble migrating : the code inside localStorage.js. I had to change

export default ({ store }) => {
  createPersistedState()(store)
}

to

export default ({ store }) => {
  window.onNuxtReady(() => {
    createPersistedState()(store)
  })
}

It's documented here :
https://github.com/robinvdvleuten/vuex-persistedstate#nuxtjs

Hope this will help someone in the same situation!

Cheers