Skip to content
On this page

Installation

Install the component using the preferred package manager

shell
yarn add @vuepic/vue-datepicker

# or

npm install @vuepic/vue-datepicker

Then import and register component

Note: css file is imported separately

Global

In the main file

js
import { createApp } from "vue";
import App from './App.vue';

import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'

const app = createApp(App);

app.component('Datepicker', Datepicker);

app.mount('#app');

Local

In the .vue files

vue
<template>
    <Datepicker v-model="date"></Datepicker>
</template>

<script>
    import Datepicker from '@vuepic/vue-datepicker';
    import '@vuepic/vue-datepicker/dist/main.css'
    
    export default {
        components: { Datepicker },
        data() {
            return {
                date: null,
            };
        }
    }
</script>
vue
<template>
    <Datepicker v-model="date"></Datepicker>
</template>

<script>
    import { ref } from 'vue';
    import Datepicker from '@vuepic/vue-datepicker';
    import '@vuepic/vue-datepicker/dist/main.css'
    
    export default {
        components: { Datepicker },
        setup() {
            const date = ref();
            
            return {
                date
            }
        }
    };
</script>
vue
<template>
    <Datepicker v-model="date"></Datepicker>
</template>

<script setup>
    import { ref } from 'vue';
    import Datepicker from '@vuepic/vue-datepicker';
    import '@vuepic/vue-datepicker/dist/main.css'
    
    const date = ref();
</script>

Alternatively, you can import the scss file if you want full control of the component styles

scss
@import '@vuepic/vue-datepicker/src/VueDatePicker/style/main.scss';

Browser

Register and use component in the .html file

Keep in mind that when you use unpkg to import the component, global component name will be VueDatePicker

Add JavaScript files

html
<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/@vuepic/vue-datepicker@latest"></script>

Add CSS file

html
<link rel="stylesheet" href="https://unpkg.com/@vuepic/vue-datepicker@latest/dist/main.css">

Register and use the component

html
<script>
    const app = Vue.createApp({
        components: { Datepicker: VueDatePicker },
    }).mount("#app");
</script>

Nuxt

If you use nuxt, make sure to also include the component under build.transpile in nuxt.config

ts
export default defineNuxtConfig({
    build: {
        transpile: ['@vuepic/vue-datepicker']
    }
})

That's it, you are ready to go

Released under the MIT License.