nuxt content not rendering components properly
---
title: 'MVP development'
---
::content-hero
<div class="flex flex-col md:w-1/2 w-full mt-12 text-balance gap-12">
<div>
::content-title{type="h2"}
Your Vision, Crafted with Care and Precision.
::
</div>
<div>
::content-title
We create tailored
<span
:class="[{ [`bg-[url('/assets/images/swoosh-sharpie.svg')] bg-no-repeat swoosh`]: mounted && colorMode.value === 'light' }]"
class="text-blew">
digital solutions
</span>
for every stage of business,
built with care and designed for growth.
::
</div>
<div>
<span class="font-semibold text-gandalf-700 text-lg">Marijn Wijbenga — Digital Solutions Architect</span>
</div>
<div class="mt-8 mx-auto sm:mx-0">
::content-button
Get a free consultation
::
</div>
</div>
<div class="md:w-1/2 w-full h-[39rem] hidden md:block">
<div
class="bg-[url('/assets/images/hero-image-wybit.png')]
h-full bg-contain bg-no-repeat bg-right"></div>
</div>
::---
title: 'MVP development'
---
::content-hero
<div class="flex flex-col md:w-1/2 w-full mt-12 text-balance gap-12">
<div>
::content-title{type="h2"}
Your Vision, Crafted with Care and Precision.
::
</div>
<div>
::content-title
We create tailored
<span
:class="[{ [`bg-[url('/assets/images/swoosh-sharpie.svg')] bg-no-repeat swoosh`]: mounted && colorMode.value === 'light' }]"
class="text-blew">
digital solutions
</span>
for every stage of business,
built with care and designed for growth.
::
</div>
<div>
<span class="font-semibold text-gandalf-700 text-lg">Marijn Wijbenga — Digital Solutions Architect</span>
</div>
<div class="mt-8 mx-auto sm:mx-0">
::content-button
Get a free consultation
::
</div>
</div>
<div class="md:w-1/2 w-full h-[39rem] hidden md:block">
<div
class="bg-[url('/assets/images/hero-image-wybit.png')]
h-full bg-contain bg-no-repeat bg-right"></div>
</div>
::this code renders the surrounding component (content-hero) fine, but inside components are rendered like string text for some reason
the content-title and content-button components look like this, but even without the nested Ui components they wont render properly
// content-button
<script setup lang="ts">
...props here
</script>
<template>
<UiButton
:layout-type="layoutType"
:button-size="buttonSize"
:button-type="buttonType"
>
<slot></slot>
</UiButton>
</template>
<style scoped>
</style>// content-button
<script setup lang="ts">
...props here
</script>
<template>
<UiButton
:layout-type="layoutType"
:button-size="buttonSize"
:button-type="buttonType"
>
<slot></slot>
</UiButton>
</template>
<style scoped>
</style>any guidance as to why this would be happening is greatly appreciated
