Nuxt•6mo ago

Nuxt Content: inline components with slots

I'm using the Nuxt UI Pro Docs template. I'm looking to have popovers with inline triggers (they look just like links, but are popovers). I want the popover panel to have markdown content as well, but since slots don't seem to be supported I'm forced to send in unformatted text as a prop, which is... incredibly suboptimal. Is there a way that I am not seeing?

5 Replies

dwol•6mo ago

It would help if you added some code or a reproduction

GendarmeOP•6mo ago

There is nothing to reproduce. I am looking for a way to do something that I don't know how to do. Nuxt Content has block components (rendered on a separate line) that have slots: https://content.nuxt.com/usage/markdown#block-components Nuxt Content also has inline components (rendered inline, which is what I want), but they don't accept slots, according to the docs: https://content.nuxt.com/usage/markdown#inline-components I want inline content with slots, because I am looking to have an inline popover (the "button" trigger is just a HTML anchor) with dynamic content. Passing in dynamic content as props gets ugly pretty quickly.

dwol•6mo ago

As far as I know theres no way to have slots for an inline component. Props might be the way to go Might be more work initially but something ive done is tied the current route to the content i want to render so i dont have to write a query content everywhere

<script setup lang="ts">
const { locale } = useI18n()
const routeWithoutLocale = useRouteWithoutLocale()

const props = defineProps({
  id: {
    type: String,
    required: true
  },
  routeSuffix: {
    type: String,
    default: ''
  }
})

const fullId = 'content-data-' + props.id

const { data } = await useAsyncData(fullId, () => {
  return queryContent()
    .where({ _locale: locale.value, _path: { $eq: routeWithoutLocale.value + props.routeSuffix } })
    .findOne()
})
</script>
<template>
  <UCard class="w-full" :data-testid="fullId">
    <ContentRenderer :value="data" class="prose prose-bcGov text-left" />
  </UCard>
</template>

<script setup lang="ts">
const { locale } = useI18n()
const routeWithoutLocale = useRouteWithoutLocale()

const props = defineProps({
  id: {
    type: String,
    required: true
  },
  routeSuffix: {
    type: String,
    default: ''
  }
})

const fullId = 'content-data-' + props.id

const { data } = await useAsyncData(fullId, () => {
  return queryContent()
    .where({ _locale: locale.value, _path: { $eq: routeWithoutLocale.value + props.routeSuffix } })
    .findOne()
})
</script>
<template>
  <UCard class="w-full" :data-testid="fullId">
    <ContentRenderer :value="data" class="prose prose-bcGov text-left" />
  </UCard>
</template>

You could make a custom popover component that renders whatever you define as rules based on the current route its on

GendarmeOP•6mo ago

The popover is just arbitrary content that I want to show as popovers rather than primary content There are no rules

dwol•6mo ago

I dont think you fully understand where im going with this. But yeah its definitely more annoying, props is the way to go even if it makes the file ugly.

Gaming

Programming

Nuxt Content: inline components with slots