N
NuxtTincan

How to set meta theme-color in nuxt.config

app: {
head: {
...
meta: [{
theme_color: '#ffffff',
}],
},
},
app: {
head: {
...
meta: [{
theme_color: '#ffffff',
}],
},
},
Why isn't theme_color or theme-color valid? What can I set here?
P
pyplacca16d ago
you need to define it as a regular meta tag, where the object's keys and values are the attribute names and values respectively. use this as reference
MDN Web Docs
theme-color - HTML: HyperText Markup Language | MDN
The theme-color value for the name attribute of the element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. If specified, the content attribute must contain a valid CSS .
T
Tincan16d ago
we're actually using this package apparently. That changes things I assume https://nuxt.com/modules/vite-pwa-nuxt
registerType: 'autoUpdate',
manifest: {
...
theme_color: "#085781",
background_color: "#085781",
},
registerType: 'autoUpdate',
manifest: {
...
theme_color: "#085781",
background_color: "#085781",
},
Nuxt
Vite-pwa-nuxt · Nuxt Modules
Zero-config PWA Plugin for Nuxt
P
pyplacca16d ago
you can check the manifest section in the application tab to see if the configuration is being deisplayed there. if it is, I'd assume vite-pwa-nuxt only injects the theme color when the app is installed also, I don't know how you're testing the implementation, but it's easier using a Safari
T
Tincan16d ago
I'm checking it in lighthouse Chrome
P
pyplacca16d ago
do you see something like this in there?
No description
T
Tincan16d ago
yes sorry for the delay it wasnt loading for some reason
T
Tincan16d ago
No description
P
pyplacca16d ago
cool. follow up question: do you see a meta tag with the theme color injected in the DOM?
T
Tincan16d ago
No description
T
Tincan16d ago
so it is actually working, its just lighthous eisnt detecting it?
P
pyplacca16d ago
means your pwa config is working fine
T
Tincan16d ago
no its not in DOM
P
pyplacca16d ago
yeah. I don't vite-pwa-nuxt injects it in the DOM until the app has been installed
T
Tincan16d ago
hm so I guess this is fine then. That issue i screenshotted is listed under PWA optimized so not neccessary to be ticked off then
P
pyplacca16d ago
you can also add the theme color in the app.head.meta array of your nuxt.config.js that should help
T
Tincan16d ago
that takes us back to the first post in the thread. theme-color and theme_color don't exist in the array
P
pyplacca16d ago
the definition is different there
// nuxt.config.ts
{
app: {
head: {
meta: [{ name: 'theme-color', content: '#085781' }]
}
},
...
}
// nuxt.config.ts
{
app: {
head: {
meta: [{ name: 'theme-color', content: '#085781' }]
}
},
...
}
just as you'd see in the mdn doc
T
Tincan16d ago
ah i see, let me try that gotcha @pyplacca so whats that doing differently than setting in in PWA?
P
pyplacca16d ago
pretty much the same but in a different scenario
T
Tincan16d ago
shouldnt it be changing my broswer colour or something then?
P
pyplacca16d ago
depends on what browser you're using ...and whether you're viewing on mobile or desktop Safari does a better job at that
T
Tincan16d ago
ok sounds good thanks for your help 🙂
P
pyplacca16d ago
happy to assist
Want results from more Discord servers?
Add your server
More Posts
Testing Nuxt 3 API EndpointsHi, I would like to test my Nuxt 3 server api endpoints. I know I could test it for example in posNitro: How do I pass data in a middleware to route handlers?In Express, you can do this attaching data to the `response.locals` object. How do I do this in NitrMake `useRoute()` update in layoutHi! Im trying to use useRoute() in a layout, to update my navigations links based on the ´route.paraHow do you set a PostCSS parser in the `nuxt.config.ts`?I'm trying to do that but it seems the "parser" option isn't allowed on the object.Auto-import only Nuxt and Vue features but no custom or third party codeHey! I wonder: is it possible to disable auto imports for components, composables, and utils while kuseAsyncData weird behaviorHi guys, I'm experiencing a strange behavior. I'm using async data to call an API. But there is a coProblem with sending POST/GET Request at the same timeNow I'm looking to load the last projects of a user from the database by sending his name and receivNuxt Content behind CloudflareWhen I use Nuxt Content behind Cloudflare, I have the issue that some pages (but not all) cannot be Odd situation with Nuxt hosting and site accessibilityHey everyone. First post on this Discord. We have a Nuxt app (an intranet, small company app) that wUButton showing over sticky headerI have a table and one of the columns is filled with Nuxt UI buttons. I have a sticky header for thiPinia as a layerHi, I’m learning pinia, and I like it so much I thought it should be a layer. Does it makes sense? IFetchError typeI've seen `import type { FetchError } from 'ofetch'`, what what's the correct module when handling `How to import functions in a .vue component from a .js file?import { myfunctions} from "/js/stats.js" doesnt work for me: Error 500 __vite_ssr_import_7__.defauskeleton does not work on dynamic routesguys, can anyone help me? the skeleton is appearing on the main page but on the page where the produhow to generate static HTML pages just for some of the routesI'm trying to generate 4 static HTML pages from a huge list of routes that the app has But I only seUDashboardPanel footer (@nuxt/ui-pro)I'm trying to put a footer on the main (`grow` enabled) panel but I can't get the css right. in the useRuntimeConfig() is returning undefined valuesIn my `.env` file I have something like this: ``` NUXT_PUBLIC_LOGIN_DOMAINS="domain1.com,domain2.co@nuxt/eslint autofix?when using `@nuxt/eslint` instead of the old `@nuxtjs/eslint-module` how does one enable autofix? `Check whether any page has fully mounted from the root App.vueSome of my pages have a ```ts definePageMeta({ hideSidebar: true }) ``` which sets the `hideSidebarGetting error "Component is already mounted" when using "useFetch()" and changing route.I am getting the error in my console: ``` [nuxt] [useFetch] Component is already mounted, please u