Vuestic VueJs hide element on small devices

Question

I want to hide element if screensize is sm or xs using vuestic vuejs framework.

<div class="flex md4 sm4 xs0"></div>
<div class="flex v-line xs0 sm0 md1"></div>
<div class="flex md8 xs12"></div>

I just need to know what can we do instead of xs0 or sm0 here? Because they are not working

Answer 1

Taha Malik.

Vuestic UI provides breakpoint service that allows you to control every aspect of your application which depends on the window size. docs

In your case try to use next example:

<template>
<div v-if="breakpoint.current!=='xs'>Hide on xs size</div>
</template>

<script setup lang="ts">
import { useBreakpoint } from "vuestic-ui";

const breakpoint = useBreakpoint()
</script>