Installation
Install the component using the preferred package manager
shell
npm install @vuepic/vue-datepicker
shell
yarn add @vuepic/vue-datepicker
shell
pnpm add @vuepic/vue-datepicker
shell
bun add @vuepic/vue-datepicker
Then import and register component
Note: css
file is imported separately
js
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
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');
Local
In the .vue
files
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>
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>
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>
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
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: { VueDatePicker },
}).mount("#app");
</script>
Add it on html page
html
<vue-date-picker></vue-date-picker>
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