在 Nuxt 3 和 Vite 中集成 bootsrap 5

Question

我正在尝试将 Bootstrap 5 集成到新的 Nuxt 3 项目中，但我遇到了一个无法解决的问题：我想通过仅导入必要的模块（scss 和 javascript）来优化它，如下所述：https:// /getbootstrap.com/docs/5.0/customize/optimize/。

我成功导入了样式，但找不到正确的方法来导入必要的js。我在目录中创建了一个bootstrap.js文件，public如下所示：

// import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/dropdown';
// import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

并在 nuxt.config.ts 的元部分添加此文件，以确保在我的页面的 head 部分调用该文件，以便 javascript 在任何地方都可用

meta: {
    script: [
        { src: 'js/bootstrap.js' }
    ],
}

但我一直有一个错误：

未捕获的语法错误：无法在模块外部使用 import 语句

我明白这是因为 Vite 不编译它，但我不知道如何让它这样做..有人知道如何做到这一点吗？谢谢 ！

Answer 1

1. 纱线添加引导程序
2. 创建plugins/useBootstrap.client.ts文件并粘贴以下代码

import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.provide('bootstrap', bootstrap)
})

3. 运行此命令yarn add --dev sass sass-loader@latest

4. 创建asset/styles/main.scss文件并粘贴以下代码

@import "bootstrap/scss/bootstrap";

5. 在nuxt.config.ts中添加以下代码

export default defineNuxtConfig({
    css: ['~/assets/styles/main.scss'],
})

6. 如果你想使用依赖于js的内容，如下拉菜单、模态框，那么你必须安装yarn add --dev @popperjs/core或npm install --save @popperjs/core

注意：您可以在main.scss文件中自定义引导程序

Answer 2

您可以在客户端项目中导入必要的bootstrap js。

plugins/bootstrap.client.ts

import { Modal } from "bootstrap";

export default defineNuxtPlugin(() => ({
  provide: {
    bootstrap: {
      Modal,
    },
  },
}));

app.vue

<template>
  <div>
    <button class="btn btn-primary" @click="toggle()">toggle modal</button>
    <div class="modal fade" id="modal-main">
      <div class="modal-dialog modal-dialog-centered" style="max-width: 600px">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Hello world!</h5>
            <button
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body p-4">Hello bootstrap and nuxt</div>
          <div class="modal-footer">
            <button class="btn btn-outline-secondary" data-bs-dismiss="modal">
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Modal } from "bootstrap";
const { $bootstrap } = useNuxtApp();

let modal: Modal;
onMounted(() => {
  modal = new $bootstrap.Modal(document.getElementById("modal-main"));
});

const toggle = () => {
  modal.toggle();
};
</script>

这是一个示例项目，仅包含引导模式所需的样式和js，首屏加载时大约60KB。

https://github.com/Debonex/samples/tree/master/nuxt3-bootstrap5