Vue3 TypeScript Boilerplate

A modern frontend boilerplate built with Vue 3, TypeScript, Tailwind CSS, and Shadcn Vue components.

Features

• ⚡️ Vue 3 - The Progressive JavaScript Framework
• 🔥 Vite - Next Generation Frontend Tooling
• 🔒 TypeScript - Static Type Checking
• 🎨 Tailwind CSS - Utility-First CSS Framework
• 📦 Shadcn Vue - Re-usable UI components
• 📊 Pinia - State Management
• 🧭 Vue Router - Official Router for Vue.js
• 🧹 ESLint - Code Linting
• ✨ Prettier - Code Formatting
• 🐶 Husky - Git Hooks
• 📝 Lint-Staged - Run linters on git staged files

Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn or pnpm

Installation

1. Clone the repository:

git clone https://github.com/9ilfoyl3/vue3-ts-shad-boilerplate.git
cd vue3-ts-boilerplate

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

Development

Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

This will start the development server at http://localhost:6106.

Building for Production

Build the application for production:

npm run build
# or
yarn build
# or
pnpm build

Preview Production Build

Preview the production build locally:

npm run preview
# or
yarn preview
# or
pnpm preview

Project Structure

vue3-ts-boilerplate/
├── public/              # Static assets
├── src/
│   ├── assets/          # Project assets (images, fonts, etc.)
│   ├── components/      # Vue components
│   ├── layouts/         # Layout components
│   ├── lib/             # Utility functions and libraries
│   ├── router/          # Vue Router configuration
│   ├── stores/          # Pinia stores
│   ├── views/           # Page components
│   ├── App.vue          # Root component
│   └── main.ts          # Application entry point
├── .eslintrc.js         # ESLint configuration
├── .prettierrc          # Prettier configuration
├── index.html           # HTML template
├── package.json         # Project dependencies and scripts
├── postcss.config.js    # PostCSS configuration
├── tailwind.config.js   # Tailwind CSS configuration
├── tsconfig.json        # TypeScript configuration
└── vite.config.ts       # Vite configuration

Code Quality Tools

Linting

Run ESLint to check for code quality issues:

npm run lint
# or
yarn lint
# or
pnpm lint

Formatting

Format your code with Prettier:

npm run format
# or
yarn format
# or
pnpm format

Git Hooks

This project uses Husky to run pre-commit hooks that ensure code quality before committing:

• pre-commit : Runs lint-staged to check and fix linting issues on staged files

Customization

Tailwind CSS

You can customize the Tailwind configuration in tailwind.config.js.

Shadcn Vue Components

This project uses Shadcn Vue for UI components. You can add more components as needed following the # offiicial documentation offiicial documentation.