Nuxt Boilerplate

Personal Nuxt boilerplate for rapid project setup and best practices.

Features

• Nuxt v4 (latest major)
• Vue 3
• TypeScript
• Tailwind CSS v4 (JIT mode)
• Pinia (state management)
• VueUse (composition utilities)
• SVGO integration
• Pre-configured ESLint & Prettier
• Example components, stores, and utilities

Getting Started

1. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

2. (Optional) Create a .env file:

   cp .env.example .env

3. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open http://localhost:3000 to view your app.

Usage

• Edit app/app.vue or add pages in app/pages/ to start building your app.
• Add components in app/components/.
• Update global styles in app/assets/css/tailwind.css.
• Use Pinia stores in app/stores/ and utilities in app/utils/.
• Add or update types in app/types/.

Customization

• Update nuxt.config.ts and tsconfig.json as needed.
• Add environment variables in .env (see .env.example if available).
• Replace or extend the example components, stores, and utilities.

Deployment

Deploy easily to Vercel or your preferred platform.

Project Structure

nuxt-boilerplate/
├── app/
│   ├── app.vue
│   ├── assets/
│   │   └── css/
│   │       └── tailwind.css
│   ├── components/
│   ├── pages/
│   ├── stores/
│   ├── types/
│   └── utils/
├── public/
├── nuxt.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── package.json

Main Dependencies

• Nuxt: Vue framework for server-side rendering, static site generation, and more
• Vue: JavaScript framework
• Pinia: State management
• Tailwind CSS: Utility-first CSS framework
• VueUse: Vue composition utilities
• ESLint & Prettier: Code linting and formatting
• TypeScript: Strongly typed language
• SVGO: SVG optimization

License

This project is licensed under the terms found in the LICENSE file.

Author

Created by Son H.Do