Skip to content

Installation

Install the component using the preferred package manager

shell
npm install @vuepic/vue-datepicker
npm install @vuepic/vue-datepicker

or

shell
yarn add @vuepic/vue-datepicker
yarn add @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 VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'

const app = createApp(App);

app.component('VueDatePicker', VueDatePicker);

app.mount('#app');
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

vue
<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>
<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>
vue
<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>
<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>
vue
<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>
<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>

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>
<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">
<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>
<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']
    }
})
export default defineNuxtConfig({
    build: {
        transpile: ['@vuepic/vue-datepicker']
    }
})

That's it, you are ready to go

Released under the MIT License.