Vue 3 (and Nuxt 3) support?

[eMeRiKa13]

Hi,

Is-this plugin working for Vue 3 (with Nuxt 3)?

It's exactly what I'm looking for.

Thanks

[eMeRiKa13]

I tried and unfortunately not

[thpngj]

this is Vue3

`

`

[markus-gx]

I tried and unfortunately not

Create a component with this code and it works (Tried in Nuxt 3 rc.1)

<script>
import { h, defineComponent } from 'vue';
export default defineComponent({
  props: {
    barStyle: Object,
    duration: {
      type: String,
      default: '12s',
    },
    direction: {
      type: String,
      default: 'normal',
    },
    delay: {
      type: String,
      default: '0s',
    },
    paused: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    customStyle() {
      return {
        ...this.barStyle,
        'animation-duration': this.duration,
        'animation-direction': this.direction,
        'animation-delay': this.delay,
        'animation-play-state': this.paused ? 'paused' : 'running',
      };
    },
  },
  render() {
    const bar = h('div', { class: 'vifnslb-bar' }, this.$slots.default());
    const slider = h(
      'div',
      { class: ['vifnslb-element'], style: this.customStyle },
      [bar, bar]
    );
    return h('div', { class: ['vifnslb-container'] }, [slider]);
  },
});
</script>

<style scoped>
@keyframes moveSlideshow {
  100% {
    transform: translateX(-50%);
  }
}
.vifnslb-container {
  width: 100%;
  overflow: hidden;
}
.vifnslb-element {
  transform: translate3d(0, 0, 0); /* Hey browser, please use my GPU */
  position: relative;
  overflow: hidden;
  animation-name: moveSlideshow;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  display: flex;
  width: max-content;
  min-width: 200%;
}
.vifnslb-bar {
  width: 50%;
}
</style>

[Rotinx]

Composition TS file version

<template>
  <render/>
</template>
<script setup lang="ts">
import {computed, h, defineProps, useSlots} from "vue";

const slots = useSlots()

const props = defineProps<{
  barStyle: Object,
  duration?: {
    type: string
  },
  direction?: {
    type: string
  },
  delay?: {
    type: string
  },
  paused? : {
    type: boolean
  }
}>()

const customStyle = computed(() => {
  return {
    ...props.barStyle,
    'animation-duration': props.duration ? props.duration.type : '12s',
    'animation-direction': props.direction ? props.direction.type : 'normal',
    'animation-delay': props.delay ? props.delay.type : '0s',
    'animation-play-state' : (props.paused && props.paused.type) ? 'paused' : 'running'
  }
})

const render = () => {
  // @ts-ignore
  const bar = h('div', { class: 'vifnslb-bar' }, slots.default())
  const slider = h('div', { class: 'vifnslb-element', style: customStyle.value }, [bar, bar])
  return h('div', { class: 'vifnslb-container' }, [slider])
}
</script>

<style>
@keyframes moveSlideshow {
  100% {
    transform: translateX(-50%);
  }
}
.vifnslb-container {
  width: 100%;
  overflow: hidden;
}
.vifnslb-element {
  transform: translate3d(0, 0, 0); /* Hey browser, please use my GPU */
  position: relative;
  overflow: hidden;
  animation-name: moveSlideshow;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  display: flex;
  width: max-content;
  min-width: 200%;
}
.vifnslb-bar {
  width: 50%;
}
</style>