Nuxt Js PWA - Metadata and theme_color not working in nuxt.config.js

Question

I'm working in Nuxt, and just about to finish a website for live use with PWA support. However, the theme color isn't changing on app load up, as well as in other applications like Discord.

Likewise, the metadata inside of the config doesn't work. However I have been able to circumvent this by just using the data in the head() function in the page itself, although a lot of the data is supposed to be the same, so if possible I'd like to have most of it in the config.

Here is my config:

import smConfig from "./sm.json";

  head: {
    title: 'Patrick Bradley',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'og:title', name: 'og:title', content: 'Patrick Bradley | UX/UI Designer' },
      { hid: 'og:image', name: 'og:image', content: "~/assets/icons/seo_photo.png" },
      { hid: 'og:image:alt', name: 'og:image:alt', content: `Hand drawn photo of Patrick Bradley` },
      { hid: 'description', name: 'description', content: 'Patrick Bradley is a London and Toronto, Ontario based UX/UI Designer, focusing on simplifying user interfaces to produce user friendly, engaging, and responsive websites and mobile applications.' },
      { hid: 'og:site_name', name: 'og:site_name', content: 'Patrick Bradley' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: site.link + 'icon.png' }
    ]
  },

  modules: [
    '@nuxtjs/pwa'
  ],

  pwa: {
    manifest: {
      lang: 'en',
      name: `PB Portfolio`,
    },
    theme_color: '#ffffff',
    name: 'PB Portfolio',
    author: 'Patrick Bradley',
  }

I've tried re-caching the PWA/SEO content, removing/re-adding secondary npm packages such as nuxtjs/google-fonts, and have also imported content from a json and added it to the tags. This actually works for the og:image, but nothing else.

Answer 1

Based on the documentation, you need to put the attributes inside the meta brackets. https://pwa.nuxtjs.org/meta/

pwa: {
  meta: {
    theme_color: '#ffffff',
    name: 'PB Portfolio',
    author: 'Patrick Bradley'
  },
  manifest: {
    lang: 'en',
    name: `PB Portfolio`,
  },
}