How to pass dynamic variables to custom component

[akshaybabloo]

I have a custom component that loads in a swagger UI and the way I call it is

<script setup>
import SwaggerUI from './components/SwaggerUI.vue';
import { useData } from 'vitepress';

const { isDark } = useData()
</script>

<SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" isDark="{{isDark}}" />

isdark property expects a Boolean but sends it as {{isDark}}. I am not sure how to pass that variable through.

Any help is appreciated.

[Zhengqbbb]

- <SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" isDark="{{isDark}}" />
+ <SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" :isDark="isDark" />