Trying to use Hooper with Vue 3

[saidaLachgar]

So I'm using vue.js 3 I followed the same steps in the doc but I keep getting this error and nothing is rendering

Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_4__.default is not a constructor

My small example is:

<hooper>
   <slide>slide 1</slide>
   <slide>slide 2</slide>
</hooper>

<script>
import { Hooper, Slide } from 'hooper';
import 'hooper/dist/hooper.css';

export default {
  components: {
    Hooper,
    Slide
  },
}
</script>

Can somebody help me please

[awwsmith]

Running into this issue as well -- were you able to find a solution?

[zdimaz]

I'm not ! "export 'default' (imported as 'Vue') was not found in 'vue' Does Not support VUE3!

[StuartCreed]

#197

[magFixCorp]

anyone still interested using this plugin in vue 3? I forked the repo and made necessary changes. https://www.npmjs.com/package/hooper-vue3 let me know if you are experiencing some issue

[rezab777]

@magFixCorp
Tried your fork, getting:
Failed to resolve import "hooper". Does the file exist?

[magFixCorp]

@magFixCorp Tried your fork, getting: Failed to resolve import "hooper". Does the file exist?

@rezab777 try import { Hooper, Slide } from 'hooper-vue3'

I just realized that the plugin still is not working properly. Needs more work on it. I am using it in my project so I will give some more effort in order to make it work . Will keep you up to date

[magFixCorp]

@rezab777 I worked past day on this and finally managed it to work with vue3. (Please note that I was using this plugin on a vue 2 app and I migrated to vue 3) The plugin is only tested on migrated version(options API), I haven't tested it yet with composition API. Here is a link to npm please use it to install. In readme you can find a simple example of how to use the plugin. Please let me know if you run into some other problems I will assist you in order to make it work.
https://www.npmjs.com/package/hooper-vue3

[ismail9k]

For Vue3 you can use this lib instead: https://github.com/ismail9k/vue3-carousel

[suniluplers]

Hi @rezab777 , I have justed install new plugin hooper-vue3 and added sample code but still it's not working for me.

<template>
  <hooper>
    <slide> slide 1 </slide>
    <slide> slide 2 </slide>
    <slide> slide 3 </slide>
    <slide> slide 4 </slide>
    <slide> slide 5 </slide>
    <slide> slide 6 </slide>
  </hooper>
</template>

<script>
import { Hooper, Slide } from "hooper-vue3";

export default {
  components: {
    Hooper,
    Slide,
  },
};
</script>

But still getting the below UI only

Could you please help me here ?

[ismail9k]

Please note that Hooper doesn't support Vue 3, and it's also not maintained anymore by me, please consider using Vue3-carousel. (https://github.com/ismail9k/vue3-carousel)

[suniluplers]

@ismail9k Do we have any flag regarding slider scroll horizontal or verical in (https://github.com/ismail9k/vue3-carousel)?

[citymy]

anyone still interested using this plugin in vue 3? I forked the repo and made necessary changes. https://www.npmjs.com/package/hooper-vue3 let me know if you are experiencing some issue

Navigation, Pagination - not work
I connect
< template v-slot:hooper-addons >
< hooper-pagination>< /hooper-pagination >
< hooper-pagination>< /hooper-pagination >
< /template >

import { Hooper, Slide, Navigation as HooperNavigation, Pagination as HooperPagination } from 'hooper-vue3';