Page title Nuxt PWA

[BenjaminOddou]

Hello @kevinmarrec, I'd like to ask a question regarding these two lines in the modules.ts file :

https://github.com/kevinmarrec/nuxt-pwa-module/blob/4ac0c2f31fa61c88edd5c1c857c858c87ff169c4/src/module.ts#L24

https://github.com/kevinmarrec/nuxt-pwa-module/blob/4ac0c2f31fa61c88edd5c1c857c858c87ff169c4/src/module.ts#L35

My question is : Can I change Nuxt PWA to undefined without regressions or side effect ? 🧐

I am asking you this because I have a bug during page transition (I opened an issue here) which lead to an undefined title during page transition. I can manage this problem with this option in my app.vue :

<script setup>
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk
      ? `${titleChunk} | Title website`
      : 'Title Website'
  }
})
</script>

The thing is the Nuxt PWA title is popping when I have no title.

https://user-images.githubusercontent.com/85166574/181291400-53697e2d-22e5-42ff-8d94-7fbb8f2f6ede.mov

[kevinmarrec]

@BenjaminOddou Did you try setting meta.name PWA option to '' (empty string) ?

The 'Nuxt PWA' is the default if it can't find one at all, and not having it was making the app 1) not PWA ready ouf of the box cause of missing manifest.name & 2) not SEO friendly cause missing meta.name (which links to title) which would not be your case if you add titleTemplate logic.

[BenjaminOddou]

Hello @kevinmarrec indeed setting

pwa: {
  meta: {
     name: ''
  }
}

in my nuxt.config.ts solve the problem. Thank you very much ! 🙂

Another questions regarding this meta module : Is it preferable to set up the meta tags in the app.vue or under the nuxt.config.ts?

If I am using the useHead method in my app.vue, do I have to define some meta parameters to '' or false in the nuxt.config.ts to avoid overwriting my meta tag ?

I feel having more control and flexibility in the app.vue file. For example, I am not sure how to set the following in the meta module :

// app.vue
<script setup>
useHead({
  meta: [
    {
      name: 'theme-color',
      content: '#FFFFFF',
      media: '(prefers-color-scheme: light)'
    },
    {
      name: 'theme-color',
      content: '#2A2A2A',
      media: '(prefers-color-scheme: dark)'
    }
  ]
})
</script>

Thank you very much for your support !!

[kevinmarrec]

@BenjaminOddou What does the meta part of this module is adding things to app.head of the Nuxt configuration.

You can either use app.head in your nuxt.config.ts or useHead in app.vue :)

I think we can close this issue as it's resolved, but feel free to open a new one if you want to define dark/light meta theme colors directly from this module.