Stuck trying to import and use with Vite

[jerryComo]

I used to have this working fine before we were using Vite Now I can't seem to integrate it without it causing errors ( I think this is down to how I've defined the slider. Nothing shows up, and I get "Component is missing template or render function." in the warnings.

import Slider from '@vueform/slider';
const slider = shallowRef({value:0});

defineProps({
slider: {value: 30 },
});

then within the tags I'm referencing it like so

the version is in the package.json as "@vueform/slider": "^2.1.7". Any help sorting this mucho appreciate :)

[phuze]

Your issue is unrelated to Vite.
To import and use the slider in a Vue 3 + Vite project, use a reactive() object.
@jerryComo please mark your issue as closed, if this helped to resolve your issue.

<script setup>
import { reactive } from "vue"
import VueformSlider from "@vueform/slider"

const vueformSliderState = reactive({
  value: 30
})
</script>

<style lang="scss">
@import "@vueform/slider/themes/default.css";
</style>

<template>
  <div>
    <VueformSlider
      v-model="vueformSliderState.value"
      :min="0"
      :max="2000"
      :step="1" />
  </div>
</template>

[att1sb]

@phuze importing the file within the style tags worked, whereas before it was working by simply importing in the script tag.