Using @nuxthq/ui and docus ?

[mathieunicolas]

Hello there,

I tried to install @nuxthq/ui in a fresh docus project, and I can see the whole UI stuff don't have any style applied.
I use @nuxthq/ui a lot these last weeks and I would love to be able to mix up both projects, since they definitely can bring some cool stuf to each other.
Is it something possible ? It doesn't work out of the box, but do you know how this could be done ?

Thanks ! Both projects, and nuxt, and content are such a pleasure to use everyday !!

[larrasu]

The only way I can use Nuxt UI on Docus is to create new components.

components/content/Button.vue

<script setup>
defineProps({
    label: { type: String, default: null },
})
</script>

<template>
    <UButton :label="label"/>
</template>

Not the ideal setup, but it's the only way I know how 😅

[mathieunicolas]

hi @larrasu , thanks for your answer ! The components can be made available globally so it's not a problem to call them from anywhere.
My big issue here is the whole tailwind style is messed up, it looks like there is no style applied at all, so I can see no border, background and text for badges are white, etc...

How do you do to get the styles from UI also applied ?! I feel like I'm close but I don't understand why it doesn't work.

[mathieunicolas]

The explanation is here : nuxt/ui#584 (comment)
Maybe it won't be possible to fix...