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)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay