如何在Nuxt项目中安装JavaScript依赖 正确加载JS库及配置插件

Nuxt项目加载Splide视频扩展的正确实现方式 #

你之前的写法不生效有两个核心原因：

• @splidejs/splide-extension-video是Splide的功能扩展，不是标准Vue插件，不能通过Vue.use()直接注册
• 这类操作DOM的媒体库仅支持客户端运行，未配置服务端渲染兼容规则会导致加载失效

具体实现步骤如下：

1. 先确认已安装全部必要依赖

npm install @splidejs/vue-splide @splidejs/splide-extension-video
# 或用yarn
yarn add @splidejs/vue-splide @splidejs/splide-extension-video

2. 在项目plugins目录下新建splide.js插件文件，写入以下内容：

import Vue from 'vue'
import { Splide, SplideSlide } from '@splidejs/vue-splide'
import Video from '@splidejs/splide-extension-video'
// 引入对应样式，缺失会导致组件渲染异常
import '@splidejs/splide/dist/css/splide.min.css'
import '@splidejs/splide-extension-video/dist/css/splide-extension-video.min.css'

// 注册全局组件并绑定视频扩展
Vue.component('Splide', {
  extends: Splide,
  props: {
    extensions: {
      type: Object,
      default: () => ({ Video })
    }
  }
})
Vue.component('SplideSlide', SplideSlide)

3. 在nuxt.config.js中注册插件，指定仅在客户端加载：

export default {
  // 其余原有配置保持不变
  plugins: [
    { src: '~/plugins/splide.js', mode: 'client' }
  ]
}

4. 业务组件中使用时，需用client-only标签包裹避免服务端渲染报错：

<template>
  <client-only>
    <Splide :options="{ video: { autoplay: false, mute: true } }">
      <SplideSlide data-splide-html-video="你的本地/远程视频地址">
        <!-- 可自定义滑块内容 -->
      </SplideSlide>
      <SplideSlide data-splide-youtube="YouTube视频ID">
        <!-- 支持第三方平台视频嵌入 -->
      </SplideSlide>
    </Splide>
  </client-only>
</template>

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