vue-ellipse-progress: 'document is not defined' when using with nuxt.js

I’m trying to use this with nuxt.js I made a plugin file with the following content:

import Vue from 'vue'
import VueEllipseProgress from 'vue-ellipse-progress'

Vue.use(VueEllipseProgress)

and get the document is not defined error. I’ve tried putting it in <client-only> tag but still getting the same error. Any fix?

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 19 (10 by maintainers)

Most upvoted comments

@alitnk

Confirmed. I tried to follow the official Nuxt guide for plugins, But that did not work:

// plugins/vue-ellipse-progress.js

import Vue from 'vue';
import VueEllipseProgress from "vue-ellipse-progress";
Vue.use(VueEllipseProgress);

// nuxt.config.js

plugins: [
    {
      src: '@/plugins/vue-ellipse-progress.js',
      mode: 'client'
    },
  ],

<client-only>
     <vue-ellipse-progress :progress="50" />
</client-only>

Although the error disappears, another error Unknown custom element: <vue-ellipse-progress> appears instead. I am not a Nuxt expert and have tried all possible options found, but without success.The error has only to do with Vue Build and Nuxt, not with the source code. I need to invest more time in this, any help is much appricated.

EDIT

I finally found an older Nuxt project where i originally tested the component, with the same config as above, latest v1.3.0 with Nuxt 2.15.3, works just fine! So, the problem is to find correct config and tell Nuxt that the lib must be used only on the client side

setaman on Apr 5, 2021

You can call plugin in mouted. Template

<template>
      <component
        :is="vueEllipseProgress"
        v-if="vueEllipseProgress"
        :progress="progress"
      />
</template>

Script

  data() {
    return {
      vueEllipseProgress: null
    }
  },
  mounted() {
    const { VueEllipseProgress } = require('vue-ellipse-progress')
    // console.log(vueEllipseProgress)
    this.vueEllipseProgress = VueEllipseProgress
    // console.log(VueEllipseProgress.default)
  },

matamune94 on Feb 23, 2022