Skip to content

Display different slot names on Studio UI #436

@TotomInc

Description

@TotomInc

Is your feature request related to a problem? Please describe

Slots inside Vue components are tightly tied to Nuxt Studio UI.

For example, a component defining a slot title has more context in code, but less context for content-editors in Nuxt Studio UI, where content-editors wants a different name that is translated.

Describe the solution you'd like

We should be able to provide/override the displayed name of a component slot, inside the Nuxt Studio UI.

Since the customization is applied at the component level, similar to definePageMeta(), we could expose a composable like defineStudioMeta()?

Doing this would expand future customization capabilities for Nuxt Studio UI.

Implementation idea

  • defineStudioMeta(meta) accepts a StudioMeta object.
  • We'll start with slots overrides, reserve top-level keys for future use (e.g. props, display, editor, etc.)
defineStudioMeta({
  slots: {
    // Ideally, we could also use i18n keys for translated content in the Studio UI.
    title: { label: t('common.title') },
    description: { label: 'Short description', tooltip: 'This content will be displayed under the title' },
  },
})

defineStudioMeta is serialized at build-time. It's a no-op at run-time:

  • Runs on user's .vue files
  • Parses SFC with @vue/compiler-sfc and finds defineStudioMeta() inside a <script setup>
  • Extracts a static object, similar as many macros in the Vue ecosystem
  • Set { [normalizedFilePath]: StudioMeta } in an in-memory map and emits a virtual module (virtual:nuxt-studio-component-meta) consumed by Nitro

Merge parsed content into /__nuxt_studio/meta

  • Merge each component that uses defineStudioMeta() with studioMetaByPath.get(normalizePath(filePath))
  • Extend ComponentMeta interface with our new property studio?: StudioMeta

Client processing is done on useHostMeta().

Describe alternatives you've considered

None.

Additional context

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions