如何在NUXT 3页组件中导入单个Bootstrap 5 JS组件？
是否只能将单个Bootstrap 5组件导入到NUXT 3应用程序的组件中？在这种特定情况下，我想使用 下拉component 来自Bootstrap 5。需要JavaScript。
我试图这样做：
app.vue：
<template>
<div class="container mt-4">
<ClientOnly><Dropdown /></ClientOnly>
</div>
</template>
下拉
<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'; //<--- how do I correctly import dropdown??
</script>
。任何人都对如何“树摇”引导JS有任何想法，只是在本地组件中导入所需的组件？
Is it possible to import just a single Bootstrap 5 component into a Nuxt 3 app's component? In this specific case, I want to use the Dropdown component from Bootstrap 5. That requires JavaScript.
I tried to do it like so:
app.vue:
<template>
<div class="container mt-4">
<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'; //<--- how do I correctly import dropdown??
</script>
That did not work. Anyone have any ideas on how to "tree shake" Bootstrap JS and just import the needed components in a local component?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在下载页面上，您可以找到本段：
因此，您可能会大量减少它，但是对于某些基本文件，很难排除它们，甚至可以决定是否应该被排除。
无论如何，Bootstrap Sass非常模块化，似乎只有一个组件可以创建自己的汇编。除此之外，我认为没有其他选择，您必须使用自己的汇编。
On the download page you find this paragraph:
So likely you could reduce it a lot but for some basic files it might hard to exclude them or even to decide if they should be excluded.
Anyway, bootstrap sass is quite modular and it seems to be possible to create an own compilation with only one component. Beside that I don't think that there exists another option and you had to use your own compilation.