2

Is it possible to use the Bootstrap 5 dropdown component in a Nuxt 3 app?

My attempt failed with the following error:

[nuxt] [request error] document is not defined

Thus, I tried to wrap the dropdown component in a <ClientOnly> component but that did not help.

Anyone got a suggestion on how I can get the dropdown to work?

Here's my code: https://stackblitz.com/edit/nuxt-starter-4jphlx?file=components/Dropdown.vue

App.vue:

<template>
  <div>
    <ClientOnly>
     <Dropdown />
    </ClientOnly>
  </div>
</template>

Dropdown.vue:

<template>
  <div class="dropdown">
    <button
      class="btn btn-secondary dropdown-toggle"
      type="button"
      id="dropdownMenuButton1"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      Dropdown button
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
</template>

<script setup>
import Dropdown from 'bootstrap/js/dist/dropdown.js';
</script>
redshift
  • 4,815
  • 13
  • 75
  • 138
  • 1
    You should wrap your dropdown inside a component and wrap that component inside the `ClientOnly` component – Duannx Jun 23 '22 at 03:12
  • 1
    This one doesn't work? https://stackoverflow.com/a/67751550/8816585 – kissu Jun 23 '22 at 07:37
  • Still get `document not defined` when wrapping dropdown component in ClientOnly tag. I'll try the other possible solutions, @kissu – redshift Jun 23 '22 at 11:25
  • Doing it this way worked! https://stackoverflow.com/questions/71795143/how-to-use-bootstrap5-with-vite-and-nuxt3 – redshift Jun 23 '22 at 12:52

0 Answers0