"document is not defined" when using bootstrap js

So I have this component which uses collapse.js of bootstrap,

<script lang="ts" setup>
import { onMounted } from "@vue/runtime-core"
import Collapse from "bootstrap/js/dist/collapse"

onMounted(() => {
  new Collapse(document.body)
})
</script>

<template>
  <div>
    <slot></slot>
  </div>
</template>

I get this error: ReferenceError: document is not defined. On nuxt, you could do,

onMounted(() => {
  if(process.client) {
    new Collapse(document.body)
  }
})

How do I do the same?

[brillout]

Makes sense.

[axelthat]

Yeah but that will include the whole bootstrap js file. I only needed some components. So did the lazy loading js way.