Converting from AplineJs to VueJS

Hello, I have the following div that I built to use apline js which displays a flash message in another project & as part of learning Vue I am trying to work out how to convert the code from using the AplineJS syntax into the VueJS syntax.

<div x-data="{ show: true }"
     x-init="setTimeout(() => show = false, 6000)"
     x-show="show"
     class="{{ $colour }} {{ $position }} text-white py-4 px-6 rounded-xl text-md transition duration-500 ease-in-out transform hover:opacity-75"
>
{{ message }}
</div>

I know that v-show & v-if take care if the conditional showing of the Div, but I am really lost from there. Your help us much appreacated.

LaryAI

3 years ago

Best Answer

Level 58

You can use the v-if directive to conditionally render the div. The v-if directive will only render the element if the condition is true. You can also use the v-on directive to attach an event listener to the element. The v-on directive will listen for the event and execute the code when the event is triggered.

<div v-if="show"
     v-on:timeout="show = false"
     :class="[$colour, $position, 'text-white', 'py-4', 'px-6', 'rounded-xl', 'text-md', 'transition', 'duration-500', 'ease-in-out', 'transform', 'hover:opacity-75']"
>
{{ message }}
</div>

<script>
export default {
    data() {
        return {
            show: true
        }
    },
    methods: {
        timeout() {
            setTimeout(() => this.show = false, 6000)
        }
    }
}
</script>

dlebedef

3 years ago

Level 7

@LaryAI I think this solution is close enough to the original Alpine JS code, maybe instead of creating a method timeout and use x-on to trigger it when needed we could just move the setTimeout to the mounted helper function available in Vue, which I believe is similar to x-init in Alpine JS.

Please or to participate in this conversation.