Добавьте Tailwind Datepicker в ваше приложение Vue 3

Введение

В этом уроке я покажу вам, как добавить виджет datepicker в ваше приложение Vue.

Мы будем использовать плагин vue-tailwind-datepicker.

Это руководство начнется с самого начала, мы установим приложение Vue, затем добавим CSS-фреймворк Tailwind, который является обязательным для vue-tailwind-datepicker.

Установите VueJs

Начнем с инициализации приложения Vue:

npm init vue@latest

Эта команда установит и выполнит create-vue, официальный инструмент для создания лесов проекта Vue.

✔ 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.

После создания проекта следуйте инструкциям по установке зависимостей и запуску dev-сервера:

cd <your-project-name>
npm install

Установите Tailwind CSS

Установите tailwindcss и аналогичные зависимости через npm, а затем выполните команду init для создания tailwind.config.js и postcss.config.js.

npm install -D tailwindcss postcss autoprefixer

Добавьте пути ко всем файлам шаблонов в файл tailwind.config.js.

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

Добавьте директивы @tailwind для каждого из слоев Tailwind в файл ./src/style.css.

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

Наконец, убедитесь, что ваш файл CSS импортируется в файл ./src/main.js:

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

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

Установите tailwindcss/forms

vue-tailwind-datepicker использует tailwindcss/forms, он обеспечивает базовый сброс стилей формы, что позволяет легко переопределять элементы формы с помощью утилит.

Установите плагин из npm:

npm install -D @tailwindcss/forms

Затем добавьте плагин в ваш файл tailwind.config.js:

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

Установите day.js

Vue Tailwind Datepicker использует Day.js под капотом, мы должны установить этот пакет, просто выполнив эту команду:

npm i dayjs

Установить vue-tailwind-datepicker

Теперь мы будем следовать официальной документации по пакету, вы можете найти ее здесь:

vue-tailwind-datepicker.com

Установите пакет, выполнив эту команду:

npm install vue-tailwind-datepicker 

Вы можете настроить компонент глобально, используя его при инициализации вашего приложения:

// 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')

Теперь мы должны завершить конфигурацию tailwind, настроив цвета датапикера.

Мы должны добавить эту строку: "./node_modules/vue-tailwind-datepicker/**/*.js" в раздел content.

Тема Vue Tailwind Datepicker является настраиваемой, поэтому вы можете настроить тему на любой цвет, который вы хотите, через конфигурацию Tailwind CSS. И все будет работать хорошо.

Цветовая система светлого режима использует пользовательский цвет vtd-primary.

Система цветов темного режима использует цветовую палитру vtd-secondary. Vue Tailwind Datepicker хорошо работает с конфигурацией темного режима Tailwind CSS.

// 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'),
  ]
}

Запустите ваше приложение

Теперь вы можете запустить свое приложение и настроить датапикер в соответствии с вашими попытками:

npm run serve

Вы можете найти все реквизиты здесь:

• https://vue-tailwind-datepicker.com/props.html

vue-tailwind-datepicker — это хороший плагин, который хорошо интегрирован с проектами Vue/tailwind, он мощный, и у вас есть много реквизитов, доступных для настройки вашего datepicker.

Демо-версия

Вы можете найти демо-версию в основной документации

Также вы можете протестировать vue-tailwind-datepicker на официальной игровой площадке через Stackblitz.

Все отлично!

Теперь вы можете использовать свой datepicker в своем приложении.

Пожалуйста, не забудьте добавить старт на Github репо плагина:

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

Спасибо,
Александр.