crud-task

This template should help get you started developing with Vue 3 in Vite.

Demo

https://crud-task10.netlify.app/

Description

This project is a Trello-like task management application built using modern web technologies, including Vue.js, TypeScript, and Pinia for state management. The application enables users to manage tasks through CRUD (Create, Read, Update, Delete) operations across multiple columns, with a drag-and-drop interface for seamless task movement.

The project leverages PrimeVue for UI components and Tailwind CSS for responsive and modern styling.

Features

Task Management: Add, edit, delete, and move tasks across customizable columns.
Drag-and-Drop Interface: Intuitive task organization using drag-and-drop functionality.
Dynamic State Management: Real-time updates using Pinia for efficient state handling.
Column Categories: Categorize tasks into predefined statuses (e.g., Ready, Review, Complete).
Modern UI Design: Tailored with Tailwind CSS for a responsive and visually appealing interface.
Reusable Components: Modular design with reusable Vue components.

Technologies Used

Framework: Vue.js (Composition API)
Language: TypeScript
State Management: Pinia
UI Library: PrimeVue
Styling: Tailwind CSS
Task Management Features: CRUD operations, drag-and-drop functionality

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

Clone the repository:

git clone https://github.com/sawada1/crud-task.git
cd crud-task
```sh
npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

sawada1/crud-task