Nuxt•8mo ago

[RESOLVED] Component children

I'm new to Vue/Nuxt.js and coming from React. I'm trying to define children in a component so I can do things like this, but is this a thing:

// alert.js

<template>
    <div class="bg-red-200 text-red-600 p-2 rounded">
        {{ children }}
    </div>
</template>

<script setup>
    const props = defineProps(['children'])
</script>

// alert.js

<template>
    <div class="bg-red-200 text-red-600 p-2 rounded">
        {{ children }}
    </div>
</template>

<script setup>
    const props = defineProps(['children'])
</script>

// login.vue

<template>
    <alert>
        <p class="font-bold">
            Example
        </div>
    </alert>
</template>

// login.vue

<template>
    <alert>
        <p class="font-bold">
            Example
        </div>
    </alert>
</template>

2 Replies

manniL•8mo ago

@Techno1Monkey Use slots ☺️ https://vuejs.org/guide/components/slots.html

Vue.js

Vue.js - The Progressive JavaScript Framework

Techno1MonkeyOP•8mo ago

Alright thanks.

Gaming

Programming

[RESOLVED] Component children