Vue 3 애플리케이션에 Tailwind Datepicker 추가

소개

이 튜토리얼에서는 Vue 애플리케이션에 datepicker 위젯을 추가하는 방법을 보여줍니다.

vue-tailwind-datepicker 플러그인을 사용합니다.

이 가이드는 처음부터 시작하여 Vue 앱을 설치한 다음 vue-tailwind-datepicker에 필수인 Tailwind CSS 프레임워크를 추가합니다.

VueJ 설치

Vue 프로젝트를 초기화하여 시작하겠습니다.

npm init vue@latest

이 명령은 공식 Vue 프로젝트 스캐폴딩 도구인 create-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 설치

npm을 통해 tailwindcss 및 해당 피어 종속성을 설치한 다음 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의 각 레이어에 대한 지시문을 ./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')

이제 datepicker 색상을 설정하여 tailwind 구성을 완료해야 합니다.

내용 섹션에 "./node_modules/vue-tailwind-datepicker/**/*.js" 행을 추가해야 합니다.

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를 사용자 정의하는 데 사용할 수 있는 소품이 많이 있습니다.

데모

찾을 수 있습니다a demo on the main documentation

또한 vue-tailwind-datepickeron the official playground via Stackblitz를 테스트할 수 있습니다.

문제 없다!

이제 앱에서 날짜 선택기를 사용할 수 있습니다.

플러그인의 Github 저장소에 시작을 추가하는 것을 잊지 마십시오.

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

고맙습니다,
알렉상드르.