⚡ Nuxt 4 Starter Template

🎯 Why This Template?

A clean, modern, and production-tested Nuxt 4 starter that saves you hours of initial setup. Built with best practices and the latest versions of your favorite tools.

✅ Nuxt 4 – Latest stable release with all new features
✅ TypeScript – Full type safety configured out of the box
✅ TailwindCSS 4 – Bleeding-edge styling with modern features
✅ Zero Config – ESLint, Vite, and auto-imports ready to go
✅ Clean Architecture – Organized folder structure for scalability
✅ Battle-Tested – Used in real production projects

---

🚀 Quick Start

Use This Template

Get started in 30 seconds ← Click to create your own repository

Or clone manually:

# Clone the repository
git clone https://github.com/odurgun/nuxt-starter-kit.git
cd nuxt-starter-kit

# Install dependencies
bun install

# Start development server
bun run dev

Default Server runs on http://localhost:7500 🚀 You can change the port on nuxt.config.ts

Build for Production

# Build the application
bun run build

# Preview production build
bun run preview

💡 Tip: You can also use either npm, yarn, deno instead of bun but use the same package manager consistently to avoid lockfile conflicts. I am assuming you have one of the package managers is already installed. if not, check https://bun.com for installation (or search other package managers)

---

🛠️ Tech Stack

The last update for the packages was April 22, 2026. You can manually update the packages in package.json, then run bun install.

Technology	Version	Purpose
Nuxt 4	4.2.2	Hybrid rendering & SSR
TypeScript	6.0.3	Type safety
TailwindCSS	4.2.4	Utility-first styling
Vite	Latest	Fast bundling & HMR
ESLint	10.2.1	Code quality & formatting

---

📁 Project Structure

nuxt-starter-kit/
├─ app/
│  ├─ app.vue                      # App shell
│  ├─ app.config.ts                # App-level config (SEO/site metadata)
│  ├─ assets/
│  │  └─ css/main.css              # Tailwind entrypoint
│  ├─ composables/
│  │  ├─ api-client/               # API client helpers
│  │  └─ env/                      # Runtime config accessor
│  ├─ layouts/default.vue          # Default layout
│  └─ pages/index.vue              # Home page
├─ public/              # Static assets
├─ server/              # Server-side code
├─ .env.example         # Environment variables template
├─ nuxt.config.ts       # Nuxt configuration
└─ tsconfig.json        # TypeScript configuration

---

✨ Features

Core Features

• ✅ Nuxt 4 with latest features and performance improvements
• ✅ TypeScript with strict mode for maximum type safety
• ✅ TailwindCSS 4 with JIT compiler and modern utilities
• ✅ ESLint configured for Nuxt, Vue, and TypeScript
• ✅ Auto-imports for components, composables, and utilities
• ✅ Path aliases using @ for clean imports

Developer Experience

• 🔥 Hot Module Replacement for instant updates
• 📝 Code examples included to get you started
• 🎨 Responsive design patterns ready to use
• 🔧 Extensible architecture for easy customization
• 📦 Production-optimized build configuration

---

🆚 Comparison

Feature	This Template	Official Nuxt Starter	Other Templates
Nuxt 4	✅	❌	❌
TailwindCSS 4	✅	❌	Partial
TypeScript Strict	✅	Partial	❌
ESLint Configured	✅	❌	Partial
Production Examples	✅	❌	❌
Clean Architecture	✅	Basic	Varies

---

🎨 Customization

Environment Variables

Copy .env.example to .env and configure:

cp .env.example .env

TailwindCSS

Tailwind is loaded from app/assets/css/main.css and configured through Nuxt/Vite in nuxt.config.ts. Add your custom tokens/utilities directly in main.css:

@import "tailwindcss";

@theme {
	--color-primary: #00dc82;
}

ESLint

Adjust linting rules in eslint.config.mjs to match your preferences.

---

📄 License

This project is licensed under the MIT License.

Free to use, modify, and distribute.

---

🙏 Acknowledgments

• Nuxt Team for the amazing framework
• TailwindCSS Team for the utility-first CSS
• TypeScript Team for type safety

---

👨‍💻 Original Author

The original work belongs to:

Maxime Bignolet
Front-End Developer – La Rochelle, France

I have modified it for my needs. Check his links:

---

🌐 View Live Demo