Doesn't work in nuxt: Cannot use import statement outside a module about slider HOT 5 CLOSED

Adding:

build: {
  transpile: ["@vueform/slider"], // If you use nuxt you must transpile the module so it can be used universally 
},

to Nuxt config should work in both versions.

from slider.

Hi Schneider, I'm currently on nuxt v2 but already using some components/features from v3, so yes any help would be much appreciated, thank you!

Hey @vervelover
im attaching my component file & nuxt.config.ts/js file, im using nuxt3 + typescript so it might be deferred a little.

components/Slider.vue

<template>
  <SliderComponent v-model="currentValues" />
</template>

<script lang="ts">
import SliderComponent from "@vueform/slider";

export default defineComponent({
  components: {
    SliderComponent, // This is required in order to use the component in the template context.
  },
  setup(props) {
      // Your setup logic goes here
  },
});
</script>
<style src="@vueform/slider/themes/default.css"></style>
<style scoped>
 // custom css here
</style>

nuxt.config.ts

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
  build: {
    transpile: ["@vueform/slider"], // If you use nuxt you must transpile the module so it can be used universally 
  },
});

for me the caveat was the nuxt.config.ts, once i transpired it everything worked.

Hope it will work to you as well

from slider.

Same here, nuxt3, module throwing the same error

from slider.

Managed to make it work using nuxt3, if you you nuxt3 and need any further help let me know and ill share my solution

from slider.

Hi Schneider,
I'm currently on nuxt v2 but already using some components/features from v3, so yes any help would be much appreciated, thank you!

from slider.