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
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
titlehas 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 likedefineStudioMeta()?Doing this would expand future customization capabilities for Nuxt Studio UI.
Implementation idea
defineStudioMeta(meta)accepts aStudioMetaobject.slotsoverrides, reserve top-level keys for future use (e.g.props,display,editor, etc.)defineStudioMetais serialized at build-time. It's a no-op at run-time:.vuefiles@vue/compiler-sfcand findsdefineStudioMeta()inside a<script setup>{ [normalizedFilePath]: StudioMeta }in an in-memory map and emits a virtual module (virtual:nuxt-studio-component-meta) consumed by NitroMerge parsed content into
/__nuxt_studio/metadefineStudioMeta()withstudioMetaByPath.get(normalizePath(filePath))ComponentMetainterface with our new propertystudio?: StudioMetaClient processing is done on
useHostMeta().Describe alternatives you've considered
None.
Additional context