Empty States

Display placeholder image when empty.

Empty drawer

You can use a drawer with empty state.

							
                                
<template>
   <BButton variant="primary" class="drawer-toggle-link" @click="handleDrawer">
        Drawer
   </BButton>
</template>

<script>
import { useDrawerStore } from '@/stores/drawer';
import emptyCardImg from '@/assets/img_src/empty-cart.png'

export default {
    setup() {
        const drawerStore = useDrawerStore();

        return {
            handleDrawer() {
                drawerStore.setDrawerContents({
                    status: true,
                    rootClass: "",
                    classes: "drawer-overlay drawer-right",
                    title: "Your Cart",
                    text: "With supporting text below as a natural lead-in to additional content.",
                    img: emptyCardImg,
                    footer: "All illustration are powered by OUCH"
                });
            }
        };
    }
}
</script>

Empty card

You can use a bootstrap card with empty state.

You have nothing to display

With supporting text below as a natural lead-in to additional content.

Add event

							
                                
<template>
    <BCard noBody class="mb-0">
        <BCardBody class="card-body">
            <div class="w-250p mx-auto">
                <BImg fluid class="d-inline-block" :src="cardImg" alt="empty2" />
            </div>
            <div class="text-center">
                <h4 class="h4">You have nothing to display</h4>
                <BCardText>
                    With supporting text below as a natural lead-in to additional content.
                </BCardText>
                <a href="#" class="btn btn-primary">Add event</a>
            </div>
        </BCardBody>
    </BCard>
</template>

<script setup>
import emptyCardImg from '@/assets/img/empty-2.png'
</script>

Empty drawer
Empty card