DEV Community

cn-2k
cn-2k

Posted on

5 2

Check if named slot exists in your page with Vue.js

In the Composition API we have the runtime function useSlots() that can be used to check if our slot exist or not, to do that we need to import it from Vue and check the existence of slot directly in template.

<template>
    <div>
        <nav
            v-if="slots.myNamedSlot"
        >
            <slot name="myNamedSlot" />
        </nav>
    </div>
</template>

<script setup>
import { useSlots } from 'vue'

// this const will be avaiable on template
const slots = useSlots()
</script>

<style>
</style>
Enter fullscreen mode Exit fullscreen mode

Attention: slots elements are dynamic and not reactive, so we need to check them directly in template.

That's it!

See'ya!

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay