Add a Tailwind Datepicker to your Vue 3 application
Alexandre Le Corre
Posted on September 7, 2022
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
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.
Once the project is created, follow the instructions to install dependencies and start the dev server:
cd <your-project-name>
npm install
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
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: [],
}
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;
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')
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
Then add the plugin to your tailwind.config.js
file:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/forms'),
// ...
],
}
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
Install vue-tailwind-datepicker
Now we will follow the official package documentation, you can find it here:
Install the package by running this command:
npm install vue-tailwind-datepicker
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')
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'),
]
}
Start your application
You can now start your application and configure the datepicker to fit your attempts:
npm run serve
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.
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
November 22, 2020