关于 Nuxt3 引入第三方插件报window is not defined

幼稚园滴小朋友

已于 2023-09-12 16:38:07 修改

阅读量1.7k

点赞数 2

文章标签：前端框架

于 2023-07-15 10:29:27 首次发布

本文链接：https://blog.csdn.net/2301_77940797/article/details/131735429

版权

文章介绍了如何在基于Nuxt.js的项目中引入和使用vue3-video-play插件。首先，在plugins目录下创建一个TS文件导入并注册组件，然后在nuxt.config.ts的plugins配置中指定该插件仅在客户端渲染时生效。

摘要由CSDN通过智能技术生成

首先，在根目录的 plugins 文件夹下创建引入插件的ts文件

我这里以vue3-video-play为例

import { defineNuxtPlugin } from 'nuxt/app';
import 'vue3-video-play/dist/style.css';
import { videoPlay } from 'vue3-video-play';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.component('videoPlay', videoPlay);
});

在 nuxt.config.ts中的 plugins 模块中添加如下配置

export default defineNuxtConfig({
  plugins: [
    {
      src: '@/plugins/vue3-video-play.ts',
      mode: 'client', // client 表示只在客户端渲染时生效
    },
  ],
});