Add a Tailwind Datepicker to your Vue 3 application

elreco

Alexandre Le Corre

Posted on September 7, 2022

Add a Tailwind Datepicker to your Vue 3 application

Image description

Introduction

In this tutorial, I will show you how to add a datepicker widget in your Vue application.

We will use the vue-tailwind-datepicker plugin.

This will guide will start from the absolute beginning, we will install a Vue app then we will add the Tailwind CSS framework which is mandatory with vue-tailwind-datepicker.

Install VueJs

Let's begin by init the Vue projet:



npm init vue@latest


Enter fullscreen mode Exit fullscreen mode

This command will install and execute create-vue, the official Vue project scaffolding tool.



✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.


Enter fullscreen mode Exit fullscreen mode

Once the project is created, follow the instructions to install dependencies and start the dev server:



cd <your-project-name>
npm install


Enter fullscreen mode Exit fullscreen mode

Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.



npm install -D tailwindcss postcss autoprefixer


Enter fullscreen mode Exit fullscreen mode

Add the paths to all of your template files in your tailwind.config.js file.



// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}


Enter fullscreen mode Exit fullscreen mode

Add the @tailwind directives for each of Tailwind’s layers to your ./src/style.css file.



/* ./src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;


Enter fullscreen mode Exit fullscreen mode

Finally, ensure your CSS file is being imported in your ./src/main.js file:



// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

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


Enter fullscreen mode Exit fullscreen mode

Install tailwindcss/forms

vue-tailwind-datepicker uses tailwindcss/forms, it provides a basic reset for form styles that makes form elements easy to override with utilities.

Install the plugin from npm:



npm install -D @tailwindcss/forms


Enter fullscreen mode Exit fullscreen mode

Then add the plugin to your tailwind.config.js file:



// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}


Enter fullscreen mode Exit fullscreen mode

Install day.js

Vue Tailwind Datepicker uses Day.js under the hood, we must install this package by simply running this command:



npm i dayjs


Enter fullscreen mode Exit fullscreen mode

Install vue-tailwind-datepicker

Now we will follow the official package documentation, you can find it here:

vue-tailwind-datepicker.com

Install the package by running this command:



npm install vue-tailwind-datepicker 


Enter fullscreen mode Exit fullscreen mode

You can setup the component globally by using it on your app initialization:



// main.js
import { createApp } from 'vue'
import App from '@/App.vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
// ...

const app = createApp(App)

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


Enter fullscreen mode Exit fullscreen mode

We must now complete our tailwind configuration by setting up the the datepicker colors.

We must add this line: "./node_modules/vue-tailwind-datepicker/**/*.js" to the content section.

Theme of Vue Tailwind Datepicker is customizable, so you can customize your theme with any color you want, via Tailwind CSS configuration. And all will work well.

Light mode color system using custom color vtd-primary.

Dark mode color system using color palette vtd-secondary. Vue Tailwind Datepicker work it well with Tailwind CSS dark mode configuration.



// tailwind.config.js
const colors = require("tailwindcss/colors")

module.exports = {
  content: [
    "./index.html", 
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/vue-tailwind-datepicker/**/*.js"
  ],
  theme: {
    extend: {
      colors: {
        "vtd-primary": colors.sky, // Light mode Datepicker color
        "vtd-secondary": colors.gray, // Dark mode Datepicker color
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ]
}


Enter fullscreen mode Exit fullscreen mode

Start your application

You can now start your application and configure the datepicker to fit your attempts:



npm run serve


Enter fullscreen mode Exit fullscreen mode

You can find all the props here:

vue-tailwind-datepicker is a good plugin which is well integrated with Vue/tailwind projects, it's powerful and you got a lot of props available to customize your datepicker.

Demo

You can find a demo on the main documentation

Also you can test vue-tailwind-datepicker on the official playground via Stackblitz

All good!

You can now use your datepicker on your app.

Please don't forget to add a start to the Github repo of the plugin:

https://github.com/elreco/vue-tailwind-datepicker

Thank you,
Alexandre.

💖 💪 🙅 🚩
elreco
Alexandre Le Corre

Posted on September 7, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related