I need to apply a class conditionally for my vue project. I have defined some props that will pass the class to a component conditionally. In this case, I don’t know what’s the best way to proceed. I will need to have a class if a variable has a value. At the moment I have a variable that is always true, so the class will be always be applied.

:class="[  
 props.class,
 {
  'pb-2x': isUsable,
  'min-h-[calc(100-vh_-_96px)]': minHeight,
  'min-h-100vh': minHeight && isUsable
 }
]"

At the moment the minHeight is set by default on true in this way

const props = withDefaults(
 defineProps<{
  minHeight: boolean
 }>(),
 {
   minHeight: true
 }
);

The condition I need to check is imported from a composable

import { checkUser } from "./utils/userCheck.ts"

const { isUserOk } = checkUser();

This const will have a string and will be undefined when page load, will be valorized only if the user will click on a button so the back-end will send the value to it.

What is the best way to proceed and have a class switch when needed? Will I need a ternary operator or a coalescing?

Can someone help me?