search

fengyuanchen / vue-countdown

Countdown component for Vue.js.
https://fengyuanchen.github.io/vue-countdown/
MIT License
691 stars 89 forks source link

Vue 3 compatibility #70

Closed u01jmg3 closed 3 years ago

u01jmg3 commented 3 years ago

Will this library be updated to work with Vue 3?

fengyuanchen commented 3 years ago

Yes, just use v2.x.

npm install vue@next @chenfengyuan/vue-countdown@next
u01jmg3 commented 3 years ago

I've just tried using 2.0.0-rc but I'm struggling to get things working. Here's my code (commented out is the code as it was working under Vue 2):

<!DOCTYPE html>
<html lang="en">
<head>
</head>
    <body>
    <div id="app">
        <template>
            <!--<countdown :time="2 * 24 * 60 * 60 * 1000" v-slot="{ days, hours, minutes }">-->
            <vue-countdown :time="2 * 24 * 60 * 60 * 1000" v-slot="{ days, hours, minutes }">
                {{ days }} days, {{ hours }} hours, {{ minutes }} minutes
            </vue-countdown>
            <!--</countdown>-->
        </template>
    </div>
    <!--<script src="https://unpkg.com/vue@2.6.12/dist/vue.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@chenfengyuan/vue-countdown@1.1.5/dist/vue-countdown.js" crossorigin="anonymous"></script>
    <script>
        Vue.component(VueCountdown.name, VueCountdown);
        new Vue({el: '#app'});
    </script>-->
    <script src="https://unpkg.com/vue@3.1.4/dist/vue.global.prod.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@chenfengyuan/vue-countdown@2.0.0-rc/dist/vue-countdown.js" crossorigin="anonymous"></script>
    <script>
        const { createApp } = Vue;
        const app = createApp({});

        app.component(VueCountdown.name, VueCountdown);
        app.mount('#app');
    </script>
</body>
</html>
fengyuanchen commented 3 years ago

You don't need to use the <template></template> element on the root Vue instance! Just drop it!

u01jmg3 commented 3 years ago

Thank you! I think that was because I was looking at the docs which still mentions <template></template>.