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

幼稚园滴小朋友

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

阅读量1.9k

点赞数 2

文章标签：前端框架

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

本文链接：https://blog.youkuaiyun.com/2301_77940797/article/details/131735429

版权

首先，在根目录的 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 表示只在客户端渲染时生效
    },
  ],
});