Vue DatepickerInstallation
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