Does not work, may be because of Vue3?

[suterma]

Unfortunately I was not able to make it work at all. I have a vue3 app, maybe this may be the reason. In this case, I would ask to please upgrade or state so in the docs.

Here's my code, slightly modified from your example:

<template>
    <div id="app" class="app">
        <ul id="features" v-show-slide="featuresOpen" class="features">
            <li>Aliquam lorem</li>
            <li>Praesent porttitor nulla vitae posuere</li>
            <li>Suspendisse nisl elit rhoncus</li>
            <li>Donec mi odio faucibus</li>
            <li>Curabitur suscipit suscipit</li>
        </ul>
        <button
            @click="toggleFeatures"
            class="toggle-features"
            aria-controls="features"
            :aria-expanded="featuresOpen ? 'true' : 'false'"
        >
            {{ featuresOpen ? 'Hide Features' : 'View Features' }}
        </button>
    </div>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
    name: 'Slider',
    data() {
        return {
            featuresOpen: false,
        };
    },
    methods: {
        toggleFeatures() {
            this.featuresOpen = !this.featuresOpen;
        },
    },
});
</script>

It does toggle the button text, but does not slide at all, just plainly show the ul list.

[suterma]

Here, of course the docs about the vue3 changes on directives. I would like it, if you decide to go that path.

https://v3.vuejs.org/guide/migration/custom-directives.html