Installation

Maintained package

New releases are published as @coderocketapp/vue-tailwind-datepicker. The old vue-tailwind-datepicker name does not receive these releases automatically.

If you used the old package, remove it first:

npm uninstall vue-tailwind-datepicker

Install the maintained package in your Vue 3 application:

npm install @coderocketapp/vue-tailwind-datepicker dayjs

Or with Yarn:

yarn add @coderocketapp/vue-tailwind-datepicker dayjs

Import the stylesheet

Import the compiled stylesheet once, for example in main.ts:

import '@coderocketapp/vue-tailwind-datepicker/style.css'

The stylesheet is included in the package. You do not need a Tailwind build, content configuration or @tailwindcss/forms in the consuming application. See Theming to customize the colors.

Use a component

<script setup>
import { ref } from 'vue'
import VueTailwindDatepicker from '@coderocketapp/vue-tailwind-datepicker'

const dateValue = ref('')
const formatter = { date: 'YYYY-MM-DD', month: 'MMM' }
</script>

<template>
  <VueTailwindDatepicker v-model="dateValue" :formatter="formatter" />
</template>

Add as-single for a single date. For a date range returned as an array, initialize dateValue with ref([]) instead. During migration, update package import paths, including the CSS import; component names and props are unchanged.

Global registration

import { createApp } from 'vue'
import App from './App.vue'
import VueTailwindDatepicker from '@coderocketapp/vue-tailwind-datepicker'
import '@coderocketapp/vue-tailwind-datepicker/style.css'

createApp(App).use(VueTailwindDatepicker).mount('#app')

Nuxt

Add the stylesheet to nuxt.config.ts:

export default defineNuxtConfig({
  css: ['@coderocketapp/vue-tailwind-datepicker/style.css'],
})

Import the component in the page or component where it is used:

<script setup>
import { ref } from 'vue'
import VueTailwindDatepicker from '@coderocketapp/vue-tailwind-datepicker'

const dateValue = ref('')
</script>

<template>
  <VueTailwindDatepicker v-model="dateValue" />
</template>