import { field, group } from "@nuxthq/studio/theme";
export default defineNuxtSchema({
appConfig: {
ui: group({
title: "UI Configuration",
description: "Configure the UI elements of your site.",
icon: "i-mdi-palette",
fields: {
logo: field({
type: "media",
title: "Logo",
description: "The main logo for your website.",
icon: "i-mdi-image",
}),
primaryColor: field({
type: "string",
title: "Primary Color",
description: "The primary color for your website's theme.",
icon: "i-mdi-palette",
default: "#3B82F6",
}),
backgroundColor: field({
type: "string",
title: "Background Color",
description: "The base/background color for your website.",
icon: "i-mdi-format-color-fill",
default: "#FFFFFF",
}),
},
}),
seo: group({
title: "SEO",
description: "SEO Configuration.",
icon: "i-ph-app-window",
fields: {
siteName: field({
type: "string",
title: "Site Name",
description:
"Name used in ogSiteName and used as second part of your page title.",
icon: "i-mdi-web",
}),
siteDescription: field({
type: "string",
title: "Site Description",
icon: "i-ph-book-open-text",
description:
"Used to generate social media and search engine descriptions for root pages.",
}),
siteUrl: field({
type: "string",
title: "Site URL",
description:
"The full URL of your website (e.g., https://www.example.com).",
icon: "i-mdi-web",
}),
favicon: field({
type: "media",
title: "Favicon",
description:
"The favicon for your website (typically a 32x32 pixel image).",
icon: "i-mdi-image",
}),
ogImage: field({
type: "media",
title: "Default Open Graph Image",
description:
"The default image to use for Open Graph tags when no specific image is set.",
icon: "i-mdi-image",
}),
twitterHandle: field({
type: "string",
title: "Twitter Handle",
description: "Your Twitter username (without the @ symbol).",
icon: "i-mdi-twitter",
}),
facebookAppId: field({
type: "string",
title: "Facebook App ID",
description:
"Your Facebook App ID for improved Open Graph integration.",
icon: "i-mdi-facebook",
}),
googleSiteVerification: field({
type: "string",
title: "Google Site Verification",
description: "The Google Search Console verification code.",
icon: "i-mdi-google",
}),
},
}),
navigation: group({
title: "Navigation",
description: "Configure the main navigation of your site.",
icon: "i-mdi-menu",
fields: {
items: field({
type: "array",
title: "Navigation Items",
description: "Define the main navigation links for your site.",
items: {
type: "object",
properties: {
label: field({
type: "string",
title: "Label",
description: "The text to display for this navigation item.",
}),
to: field({
type: "string",
title: "Route",
description:
"The route path for this navigation item (e.g., /about, /contact).",
}),
icon: field({
type: "string",
title: "Icon",
description:
"Optional icon class for the navigation item (e.g., i-mdi-home).",
}),
children: field({
type: "array",
title: "Submenus",
description: "Optional submenu items for dropdown navigation.",
items: {
type: "object",
properties: {
label: field({
type: "string",
title: "Submenu Label",
description: "The text to display for this submenu item.",
}),
to: field({
type: "string",
title: "Submenu Route",
description: "The route path for this submenu item.",
}),
},
},
}),
},
},
default: [
{ label: "Home", to: "/", icon: "i-mdi-home" },
{ label: "About", to: "/about", icon: "i-mdi-information" },
{ label: "Contact", to: "/contact", icon: "i-mdi-email" },
],
}),
},
}),
},
});
It renders on https://nuxt.studio without any issues and I can alter the options, how do I access this object in my app? If I use const config = useAppConfig() it just gets the locally defined app config and doesn't access the details from the studio.
I have this
nuxt.schema.ts
It renders on https://nuxt.studio without any issues and I can alter the options, how do I access this object in my app? If I use
const config = useAppConfig()
it just gets the locally defined app config and doesn't access the details from the studio.