ReferenceError: document is not defined with Nuxt.js 2.2.0 when adding import in component

ybabenkoJapp commented 1 year ago

Describe the bug

A clear and concise description of what the bug is.

Hi! I added the import for local use in my component as described in the docs

here is my code


<template>
  <div class="range-slider-wrapper">
    <div class="range-slider-container mb-14">
      <vue-slider
        v-model="sliderValue"
        tooltip="none"
        v-bind="options"
        :data="dataArray"
        :data-value="'value'"
        :data-label="'label'"
        :interval="1"
        :min="1"
        :max="3"
      ></vue-slider>
    </div>
  </div>
<template>

<script lang="ts">
import { Prop, Vue } from 'vue-property-decorator';
import Component from 'vue-class-component';
import VueSlider from 'vue-slider-component';
import { IRangeSlider } from '~/types/ISlider';
import 'vue-slider-component/theme/default.css';

@Component({
  components: {
    VueSlider,
  },
})
export default class RangeSliderComponent extends Vue {
my code is here
}
</script>

and I got this error

ReferenceError document is not defined

Additional context (If there is no relevant content, please delete the block)

I have read recently these issues but it didn't help me: https://github.com/NightCatSama/vue-slider-component/issues/75 https://github.com/NightCatSama/vue-slider-component/issues/134

I don't want to use VueSlider globally as a plugin. Can you help me to understand what is wrong?

Add any other context or screenshots about the feature request here.

Environment (If you feel unrelated, please delete the block)

OS & Version: [e.g. macOS, Windows, Linux]

Vue version: [e.g. v2.0, v2.5, v2.6]

"dependencies": {
"@nuxt-hero-icons/solid": "^1.0.1",
"@nuxt/typescript-runtime": "^0.4.10",
"@nuxtjs/axios": "^5.11.0",
"@nuxtjs/robots": "^2.4.2",
"@nuxtjs/sitemap": "^2.4.0",
"nuxt": "^2.2.0",
"nuxt-font-loader-strategy": "^1.1.9",
"nuxt-lazy-load": "^1.2.9",
"standard-version": "^8.0.1",
"storyblok-nuxt": "^1.2.0",
"swiper": "^7.0.9",
"vue-class-component": "^7.2.3",
"vue-intersect-directive": "^1.1.1",
"vue-lottie-player": "^0.1.9",
"vue-pagination-2": "^3.0.91",
"vue-property-decorator": "^9.0.0",
"vue-range-slider": "^0.6.0",
"vue-slider-component": "^3.2.15",
"vuex": "^3.5.1"
},

Component Version: [e.g. v3.0.2]

NightCatSama commented 1 year ago

Try using this:

https://nightcatsama.github.io/vue-slider-component/#/?hash=server-side-rendering-ssr

ybabenkoJapp commented 1 year ago

@NightCatSama thank you it really helped

NightCatSama / vue-slider-component