Vue3 comptible

[markusand]

Vue 3 has been in the party for quite a long time now. Is there a plan to migrate it to Vue 3 composition API?

[superdiazzz]

i hope someone updated for vue 3

[jbrundagejr]

Is it me or is vue-scrollama incompatible with Vue3?

[attharmirza]

Hey all, I tried making a Vue 3 implementation of scrollama and it seems to work alright so far. I hope the following helps anyone who might be struggling:

<script setup>
import { ref, onUpdated } from 'vue'
import scrollama from 'scrollama'

const props = defineProps({
    offset: {
        type: [Number, String],
        required: false,
        default: () => 0.5
    },
    progress: {
        type: Boolean,
        required: false,
        default: () => false
    },
    threshold: {
        type: Number,
        required: false,
        default: () => 4
    },
    once: {
        type: Boolean,
        required: false,
        default: () => false
    },
    debug: {
        type: Boolean,
        required: false,
        default: () => false
    }
})

const parent = ref(null)

const scroller = scrollama()

const emit = defineEmits(['step-progress', 'step-enter', 'step-exit'])

onUpdated(() => {
    scroller.destroy()

    const { offset, progress, threshold, once, debug } = props

    const step = [...parent.value.children]

    scroller
        .setup({ step, offset, progress, threshold, once, debug})
        .onStepEnter(resp => {
            // console.log(resp)
            emit('step-enter', resp);
        })
        .onStepProgress(resp => {
            // console.log(resp)
            emit('step-progress', resp)
        })
        .onStepExit(resp => {
            // console.log(resp)
            emit('step-exit', resp);
        })
})
</script>

<template>
    <div ref="parent">
        <slot></slot>
    </div>
</template>

<style module></style>

[Kakedev21]

Hey all, I tried making a Vue 3 implementation of scrollama and it seems to work alright so far. I hope the following helps anyone who might be struggling:

<script setup>
import { ref, onUpdated } from 'vue'
import scrollama from 'scrollama'

const props = defineProps({
    offset: {
        type: [Number, String],
        required: false,
        default: () => 0.5
    },
    progress: {
        type: Boolean,
        required: false,
        default: () => false
    },
    threshold: {
        type: Number,
        required: false,
        default: () => 4
    },
    once: {
        type: Boolean,
        required: false,
        default: () => false
    },
    debug: {
        type: Boolean,
        required: false,
        default: () => false
    }
})

const parent = ref(null)

const scroller = scrollama()

const emit = defineEmits(['step-progress', 'step-enter', 'step-exit'])

onUpdated(() => {
    scroller.destroy()

    const { offset, progress, threshold, once, debug } = props

    const step = [...parent.value.children]

    scroller
        .setup({ step, offset, progress, threshold, once, debug})
        .onStepEnter(resp => {
            // console.log(resp)
            emit('step-enter', resp);
        })
        .onStepProgress(resp => {
            // console.log(resp)
            emit('step-progress', resp)
        })
        .onStepExit(resp => {
            // console.log(resp)
            emit('step-exit', resp);
        })
})
</script>

<template>
    <div ref="parent">
        <slot></slot>
    </div>
</template>

<style module></style>

does this also work in typescript?