sagarkbhatt/vuejs-countdown-timer

Use with vue.js 2

Closed this issue · 4 comments

mirikerstein commented

Hello,

I'm trying to run this with vue.js 2. Would you be able to provide a basic example? Also, how can I adapt this to only display minutes:seconds, instead of the full date? Thank you!

sagarkbhatt commented

@mirikerstein You can use this with module bundler. I have used WebPack as module bundler. Example code.

import Vue from 'vue';

import CountDownTimer from './CountDownTimer.vue';

Vue.component( 'countdown-timer', CountDownTimer );

const App = Vue.extend( {

	template: '<countdown-timer deadline="2018-08-21 12:00:00" ></countdown-timer>'

} );

new App().$mount( '#app' );

If you are not using any module bundler in your project then you have to compile this component in pure JS to use it as library. Reference article .

If you want to only display minutes:seconds, then you have to update the component. It can be found inside src/CountDownTimer.vue in repo.

Code snippet

<span v-else>{{ minutes }}:{{ seconds }}</span>

I have provided also simple WebPack config that can be found at root of repo.

jmurth1234 commented

I have provided also simple WebPack config that can be found at root of repo.

There's no webpack config in the root of the repo - probably because it's in the .gitignore for some reason

mirikerstein commented