Can't Access Nuxt Studio Data in Frontend of Application

[maclong9]

Environment

---

• Operating System: Darwin
• Node Version: v20.15.1
• Nuxt Version: 3.12.4
• CLI Version: 3.12.0
• Nitro Version: -
• Package Manager: pnpm@9.5.0
• Builder: -
• User Config: compatibilityDate, devtools, modules, studio
• Runtime Modules: @nuxt/ui@2.17.0, @nuxt/eslint@0.3.13, @nuxt/image@1.7.0, @nuxthub/core@0.7.1, @nuxt/content@2.13.2, @nuxthq/studio@2.0.3, @nuxt/fonts@0.7.1

• Build Modules: -

Reproduction

Shouldn't need one, I just need help where the docs don't seem to have any information.

Describe the bug

I have this nuxt.schema.ts

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" },
          ],
        }),
      },
    }),
  },
});

Additional context

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 returns the locally defined app config and doesn't access the details from the studio.

Logs

No response

[maclong9]

It seems it was a case of me not pulling the changes that were made in the editor and my app.config.ts wasn't setup to mirror the nuxt.schema.ts.