Nuxt•2mo ago

Is Nuxt Studio broken?

Is Nuxt Studio broken ? Everytime I try to change my app colors, Nuxt Studio sets the wrong values. Here's my nuxt.schema.ts:

import { field, group } from '@nuxt/content/preview'

export default defineNuxtSchema({
  appConfig: {
    ui: group({
      title: 'UI',
      description: 'UI Customization.',
      icon: 'i-mdi-palette-outline',
      fields: {
        colors: group({
          title: 'Colors',
          description: 'Manage main colors of your application',
          icon: 'i-mdi-palette-outline',
          fields: {
            primary: field({
              type: 'string',
              title: 'Primary',
              description: 'Primary color of your UI.',
              icon: 'i-mdi-palette-outline',
              default: 'green',
              required: ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
            }),
            neutral: field({
              type: 'string',
              title: 'Neutral',
              description: 'Neutral color of your UI.',
              icon: 'i-mdi-palette-outline',
              default: 'slate',
              required: ['slate', 'gray', 'zinc', 'neutral', 'stone']
            })
          }
        })
      }
    })
  }
})

import { field, group } from '@nuxt/content/preview'

export default defineNuxtSchema({
  appConfig: {
    ui: group({
      title: 'UI',
      description: 'UI Customization.',
      icon: 'i-mdi-palette-outline',
      fields: {
        colors: group({
          title: 'Colors',
          description: 'Manage main colors of your application',
          icon: 'i-mdi-palette-outline',
          fields: {
            primary: field({
              type: 'string',
              title: 'Primary',
              description: 'Primary color of your UI.',
              icon: 'i-mdi-palette-outline',
              default: 'green',
              required: ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
            }),
            neutral: field({
              type: 'string',
              title: 'Neutral',
              description: 'Neutral color of your UI.',
              icon: 'i-mdi-palette-outline',
              default: 'slate',
              required: ['slate', 'gray', 'zinc', 'neutral', 'stone']
            })
          }
        })
      }
    })
  }
})

See the screenshot, Nuxt Studio sets the ui.colors field directly instead of ui.colors.primary

23 Replies

kapa.ai•2mo ago

Hi @Spiderman. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry you're experiencing issues with Nuxt Studio setting the wrong values for your app colors. Based on the knowledge sources, Nuxt Studio is designed to allow editing of your app.config.ts via a schema defined in nuxt.schema.ts. The schema you provided appears correct for exposing ui.colors.primary and ui.colors.neutral as editable fields in Studio. However, the knowledge sources do not mention any known bug or issue where Nuxt Studio incorrectly sets the ui.colors field directly instead of ui.colors.primary or ui.colors.neutral. The documentation shows that, when configured properly, Studio should map the form fields to the correct nested keys in your config file, as in the example for editing UI colors:

export default defineNuxtSchema({
  ui: group({
    title: 'UI',
    description: 'UI Customization.',
    icon: 'i-mdi-palette-outline',
    fields: {
      primary: field({
        type: 'string',
        title: 'Primary',
        description: 'Primary color of your UI.',
        icon: 'i-mdi-palette-outline',
        required: ['sky', 'mint', 'rose', 'amber', 'violet', 'emerald', 'fuchsia', '...']
      }),
      gray: field({ ... }),
      // ...
    }
  })
})

export default defineNuxtSchema({
  ui: group({
    title: 'UI',
    description: 'UI Customization.',
    icon: 'i-mdi-palette-outline',
    fields: {
      primary: field({
        type: 'string',
        title: 'Primary',
        description: 'Primary color of your UI.',
        icon: 'i-mdi-palette-outline',
        required: ['sky', 'mint', 'rose', 'amber', 'violet', 'emerald', 'fuchsia', '...']
      }),
      gray: field({ ... }),
      // ...
    }
  })
})

Edit on Studio If Studio is not mapping the fields as expected, it could be a bug or a misconfiguration, but the knowledge sources do not provide explicit troubleshooting steps or acknowledge this as a known issue. You may want to: - Double-check that your app.config.ts structure matches what Studio expects (i.e., ui.colors.primary). - Ensure you are using the latest version of Nuxt Content and Studio, as there have been recent changes and deprecations (such as the move to the Preview API) Migrate Studio activation. - If the problem persists, consider reporting it as an issue on the Nuxt Content GitHub, as the documentation does not mention this specific behavior. In summary, the knowledge sources do not explicitly mention that Nuxt Studio is broken or has this bug, nor do they provide a solution for the issue you described. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@385896526704279563> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SpidermanOP•2mo ago

SpidermanOP•2mo ago

The config is correct, the issues is directly from nuxt studio @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the available knowledge sources, there is no explicit mention of a bug in Nuxt Studio where it incorrectly sets the ui.colors field directly instead of ui.colors.primary or ui.colors.neutral. The documentation shows that, when using a schema like yours, Studio should map the form fields to the correct nested keys in your app.config.ts file, and any updates in the Studio UI should be reflected in the corresponding nested fields of your config file Edit on Studio. If you are experiencing this issue, it is not documented in the official guides or migration notes. The knowledge sources do not provide troubleshooting steps or acknowledge this as a known problem. If your configuration matches the documented approach and the issue persists, it may be a bug or a regression in Nuxt Studio that is not yet covered in the documentation. In this case, the best course of action would be to report the issue to the Nuxt Content team, as the knowledge sources do not contain enough information to confirm or resolve this specific behavior. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@385896526704279563> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SpidermanOP•2mo ago

Any chance to get help here directly? @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Of course! You can get help here, and I’ll do my best to assist you based on the official Nuxt and Nuxt Studio documentation. However, if your issue is a bug or an undocumented behavior in Nuxt Studio (such as the config mapping problem you described), the knowledge sources do not provide a direct solution or acknowledge this as a known issue. In such cases, the recommended approach is to report the problem to the Nuxt Content team or seek help from the community. You can do this by: - Opening a GitHub Discussion or Issue for Nuxt Content or Nuxt Studio. - Joining the Nuxt Discord for real-time help from the community and core team. The documentation encourages users to reach out through these channels for support with issues that are not covered in the docs or when you suspect a bug Getting Help. If you have more details or another question about Nuxt, feel free to ask here! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@385896526704279563> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SpidermanOP•2mo ago

btw, why tailwind doesn't include classes in my content/*.md files ? they are present but not being applied when used in the .md files @kapa.ai @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: Sorry @Spiderman, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

SpidermanOP•2mo ago

btw, why tailwind doesn't include classes in my content/*.md files ? they are present but not being applied when used in the .md files @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Tailwind CSS may not apply classes used in your content/*.md files if it doesn't detect those files as sources for class extraction. With Tailwind CSS v4 and Nuxt Content, you need to explicitly tell Tailwind to scan your content directory for class names, especially since Markdown files are not always picked up by default. To fix this, add the @source directive in your main CSS file (e.g., assets/css/main.css) to point Tailwind to your content directory:

@import "tailwindcss";
@import "@nuxt/ui"; /* or "@nuxt/ui-pro" if you use UI Pro */

@source "../../content";

@import "tailwindcss";
@import "@nuxt/ui"; /* or "@nuxt/ui-pro" if you use UI Pro */

@source "../../content";

This ensures Tailwind scans your Markdown files for class names and generates the corresponding CSS utilities. Without this, classes written in .md files will not be included in the final CSS bundle, so they won't be applied at runtime Theme & @source directive. If you are using Nuxt UI Pro v3, this step is especially important, as the Tailwind config file is no longer used and all configuration is done via CSS directives UI Pro migration guide. Summary:
Add the @source directive in your CSS to include Tailwind classes from your Markdown files. This should resolve the issue of classes not being applied in your .md content. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@385896526704279563> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SpidermanOP•2mo ago

I did that, but doesn't work I did that, but doesn't work @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If you have already added the @source directive in your CSS file (such as @source "../../content";) and Tailwind classes from your content/*.md files are still not being applied, the knowledge sources do not provide further troubleshooting steps or explanations for this issue. The official documentation states that using the @source directive is the required step to ensure Tailwind scans your Markdown files for class names, especially when using Nuxt UI or Nuxt UI Pro with Tailwind CSS v4 Theme & @source directive UI Pro migration guide. If this is not working, the knowledge sources do not mention any additional configuration or known issues. I'm sorry, but there's no further information in the knowledge sources to explain why Tailwind is not applying classes from your Markdown files if the @source directive is already in place. If the problem persists, it may be necessary to seek help from the Nuxt community or file an issue, as this specific scenario is not covered in the provided documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@385896526704279563> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SpidermanOP•2mo ago

@kapa.ai any chance to get help from the nuxt team here? these 2 issues are really blocking me from going forward

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm here to help as much as possible using the official Nuxt and Nuxt UI documentation. However, the knowledge sources do not indicate that you can get direct, real-time support from the Nuxt core team through this chat or documentation interface. The official recommendation for getting help with blocking issues is to reach out to the Nuxt community or the team via the following channels: - GitHub Discussions or Issues: You can open a discussion or report a bug on the relevant Nuxt or Nuxt Content GitHub repositories. - Nuxt Discord: Join the Nuxt Discord for real-time help and to connect with the community and core team. - Professional Support: If you need guaranteed, in-depth help, NuxtLabs offers professional support through the Nuxt Experts. The documentation encourages users to use these channels for support, especially when facing blocking issues that are not covered in the docs or when you suspect a bug Getting Help. If you have more details or a specific Nuxt question, feel free to ask here and I’ll do my best to assist you! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@385896526704279563> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SpidermanOP•2mo ago

@kapa.ai what might trigger the issue I have with nuxt studio setting the wrong values. Instead of setting ui.colors.primary = red, it sets ui.colors = red

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, there is no explicit documentation or troubleshooting guide for the specific issue where Nuxt Studio sets ui.colors = red instead of ui.colors.primary = red. The official docs show that, when using a schema with nested groups (as in your nuxt.schema.ts), Studio should map the form fields to the correct nested keys in your app.config.ts file Edit on Studio. Possible triggers for this issue, based on the documentation, could include: - Schema Structure: If the schema does not match the expected structure or if there is a mismatch between the schema and the actual app.config.ts file, Studio might not map the fields correctly. However, your schema appears to follow the documented approach for nested groups and fields. - Version Mismatch: The documentation notes that there have been recent changes and migrations in Nuxt Content and Studio, including how config editing works and the move to the Preview API. Using an outdated version or a version mismatch between Nuxt Content, Studio, and your project could potentially cause unexpected behavior How to upgrade your Nuxt documentation website to Content x UI v3. - Studio Bug: If your configuration matches the documentation and you are using the latest versions, this behavior may be a bug in Nuxt Studio. The knowledge sources do not mention this as a known issue. In summary, the knowledge sources do not provide a definitive answer or list of triggers for this issue. If your schema and config are correct and up to date, and the problem persists, it is likely an undocumented bug or regression in Nuxt Studio. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@385896526704279563> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Is Nuxt Studio broken?

Did you find this page helpful?