'document is not defined' when using with nuxt.js about vue-ellipse-progress HOT 19 CLOSED

@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

from vue-ellipse-progress.

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)
  },

from vue-ellipse-progress.

So, the plugin initialization in my first comment is correct and it works! I just realized that i imported Vue instead of vue 😐. That was just a little typo that had made me crazy.

from vue-ellipse-progress.

@matamune94 yes, that is another approach that might be useful in other environments. I use this for example in the new docs site (available soon) in Vuepress.

from vue-ellipse-progress.

so how can we fix this issue?

from vue-ellipse-progress.

@timon0305 just by following the Nuxt 2/Nuxt 3 official guides for plugins. Maybe the info in the new yet unreleased docs can also be useful.

from vue-ellipse-progress.

@timon0305 just by following the Nuxt 2/Nuxt 3 official guides for plugins. Maybe the info in the new yet unreleased docs can also be useful.

Could you please tell me more ?

from vue-ellipse-progress.

what is your setup? What exactly is not forking for you from the linked guides and what are the errors?

from vue-ellipse-progress.

When I start project, it says there is no issue.
But as you can see, project is not runinig

from vue-ellipse-progress.

i don't see any evidence that the error is related to this plugin. You have to investigate the error more deeply and find detailed error logs.

from vue-ellipse-progress.

project said there is no issue.

from vue-ellipse-progress.

i can't help you debugging your project. If you have some concrete issue with the plugin, please open new issue and describe your problem detailed as possible. This issue was already resolved

from vue-ellipse-progress.

if resolved, where can I find?

from vue-ellipse-progress.

right here

from vue-ellipse-progress.

I tried to import that module but I got new issue

from vue-ellipse-progress.

Did you added the plugin as Nuxt plugin following the official Nuxt documentation?

from vue-ellipse-progress.

yes

from vue-ellipse-progress.

Could you please share your project or at least all relevant code parts?

from vue-ellipse-progress.

this project is private

from vue-ellipse-progress.