Vue DatepickerInstallation
Install the component using the preferred package manager
shell
npm install @vuepic/vue-datepickernpm install @vuepic/vue-datepickeror
shell
yarn add @vuepic/vue-datepickeryarn add @vuepic/vue-datepickerThen 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