Installation

Install the component using the preferred package manager

npm

npm install @vuepic/vue-datepicker

yarn

yarn add @vuepic/vue-datepicker

pnpm

pnpm add @vuepic/vue-datepicker

bun

bun add @vuepic/vue-datepicker

Then import and register component

Note: css file is imported separately

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

Global

In the main file

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

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

const app = createApp(App);

app.component('VueDatePicker', VueDatePicker);

app.mount('#app');

Local

In the .vue files

script setup

<template>
  <VueDatePicker v-model="date"></VueDatePicker>
</template>

<script setup>
import { ref } from 'vue';
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'

const date = ref();
</script>

Composition API

<template>
  <VueDatePicker v-model="date"></VueDatePicker>
</template>

<script>
import { ref } from 'vue';
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'

export default {
  components: { VueDatePicker },
  setup() {
    const date = ref();

    return {
      date
    }
  }
};
</script>

Options API

<template>
  <VueDatePicker v-model="date"></VueDatePicker>
</template>

<script>
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'

export default {
  components: { VueDatePicker },
  data() {
    return {
      date: null,
    };
  }
}
</script>

Browser

Register and use component in the .html file

Note

• Keep in mind that when you use unpkg to import the component, global component name will be VueDatePicker
• When you add a component inside html page, make sure to add it with - like <vue-date-picker>

Add JavaScript files

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

Add CSS file

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

Register and use the component

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

Add it on html page

<vue-date-picker></vue-date-picker>

Nuxt

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

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

That's it, you are ready to go