如何在Nuxt 3项目中正确引入bulma-carousel库？

错误1：ReferenceError: window is not defined #

原因 #

Nuxt 3 默认采用服务端渲染（SSR）模式，直接在 <script setup> 顶层执行 bulmaCarousel.attach() 会在服务端运行，但 window 是浏览器专属对象，服务端环境不存在，因此触发该错误。

解决方法 #

确保轮播初始化代码仅在客户端浏览器环境执行，可通过 onMounted 生命周期钩子（组件挂载到浏览器DOM后触发）包裹代码，或使用动态导入：

修改后的 index.vue：

<script setup>
import { onMounted } from 'vue'
// 方式1：普通导入 + onMounted
import bulmaCarousel from 'bulma-carousel'

onMounted(() => {
  bulmaCarousel.attach('#carousel-demo', {
    slidesToScroll: 1,
    slidesToShow: 4,
  })
})

// 方式2：动态导入（仅客户端加载）
// onMounted(async () => {
//   const bulmaCarousel = await import('bulma-carousel')
//   bulmaCarousel.default.attach('#carousel-demo', {
//     slidesToScroll: 1,
//     slidesToShow: 4,
//   })
// })
</script>

<template>
  <div>
    <section class="hero is-medium has-carousel">
      <div id="carousel-demo" class="hero-carousel">
        <div class="item-1">
          <!-- Slide Content -->
        </div>
        <div class="item-2">
          <!-- Slide Content -->
        </div>
        <div class="item-3">
          <!-- Slide Content -->
        </div>
      </div>
      <div class="hero-head"></div>
      <div class="hero-body"></div>
      <div class="hero-foot"></div>
    </section>

    <section class="section">
      <div class="container">
        <h1 class="title">Hello World</h1>
        <p class="subtitle">My first website with <strong>Bulma</strong>!</p>
      </div>
    </section>
  </div>
</template>

错误2：TypeError: $slider is not a function #

原因 #

虽然插件文件命名为 slider.client.ts（仅客户端加载），但在 <script setup> 顶层直接调用 $slider() 时，组件可能仍处于服务端渲染阶段，此时插件尚未在客户端完成注入，导致方法不存在。

解决方法 #

将 $slider 的调用放在客户端生命周期钩子中，确保仅在浏览器环境执行：

1. 保持插件代码不变（slider.client.ts）

// @ts-nocheck
import bulmaCarousel from 'bulma-carousel'

export default defineNuxtPlugin(() => {
  return {
    provide: {
      slider: (id: string, options: object) =>
        bulmaCarousel.attach(id, options),
    },
  }
})

2. 修改 index.vue，用 onMounted 包裹调用

<script setup>
import { onMounted } from 'vue'
const { $slider } = useNuxtApp()

onMounted(() => {
  $slider('carousel-demo', {
    slidesToScroll: 1,
    slidesToShow: 4,
  })
})
</script>

<template>
  <div>
    <section class="hero is-medium has-carousel">
      <div id="carousel-demo" class="hero-carousel">
        <div class="item-1">
          <!-- Slide Content -->
        </div>
        <div class="item-2">
          <!-- Slide Content -->
        </div>
        <div class="item-3">
          <!-- Slide Content -->
        </div>
      </div>
      <div class="hero-head"></div>
      <div class="hero-body"></div>
      <div class="hero-foot"></div>
    </section>

    <section class="section">
      <div class="container">
        <h1 class="title">Hello World</h1>
        <p class="subtitle">My first website with <strong>Bulma</strong>!</p>
      </div>
    </section>
  </div>
</template>

额外注意事项 #

• 确保已正确安装 bulma-carousel 依赖：npm install bulma-carousel 或 yarn add bulma-carousel
• 如果使用 TypeScript，可移除插件中的 // @ts-nocheck，为 options 参数添加更具体的类型定义

内容的提问来源于stack exchange，提问作者Dovahkiin