DEV Community

Maxime Bignolet
Maxime Bignolet

Posted on

I Built a Nuxt 4 Starter Template I'd Actually Use in Production

#nuxt #vue #typescript #webdev

After a year of building Nuxt apps professionally at a French tech company, I noticed I was repeating the same setup for every project. So I built a starter template that I actually use in real work—and I'm sharing it today.

🌐 Live Demo • 📦 GitHub

The Problem with Starter Templates

Most templates fall into two categories:

  1. Too minimal – Just the framework, you configure everything yourself
  2. Too bloated – 50 dependencies, complex folder structures, half you'll delete anyway

What I needed was the middle ground: production-ready without the bloat.

What's Inside 

✅ Nuxt 4 (latest stable)
✅ TypeScript (strict mode enabled)
✅ TailwindCSS 4 (yes, already!)
✅ Vite (lightning-fast HMR)
✅ ESLint (configured but not annoying)
✅ Clean folder structure
Enter fullscreen mode Exit fullscreen mode

Clean Folder Structure 

app/
├── assets/          # Global styles, images
├── components/      # Vue components (auto-imported)
├── composables/     # Reusable logic
├── layouts/         # App layouts
├── pages/           # File-based routing
└── utils/           # Helper functions
Enter fullscreen mode Exit fullscreen mode

No src/ directory. Nuxt 4's new structure is cleaner without it.

ESLint Configuration That Works

Most templates either skip ESLint entirely or configure it so strictly that you fight with it constantly.

My sweet spot:

// eslint.config.mjs
export default [
  ...nuxtEslintConfig,
  {
    rules: {
      'vue/multi-word-component-names': 'off', // Too annoying
      '@typescript-eslint/no-unused-vars': 'warn', // Warning, not error
    }
  }
]
Enter fullscreen mode Exit fullscreen mode

Catches real bugs without yelling about style preferences.

Real-World Numbers

From actual production use:

Metric Result
⚡ Dev server start ~2 seconds
📦 Build time ~30 seconds
💾 Bundle size ~85KB gzipped

What I've Built With It

I've used this exact template to bootstrap:

  • 🚀 A SaaS dashboard (added auth + Stripe)
  • 📄 A marketing website (added Nuxt Content)
  • 🔧 An internal tool (added API integration)

Each time: working, type-safe, styled app in under an hour.

Quick Start

Use GitHub's Template Feature (Recommended)

Click "Use this template" on the GitHub repo

Or Clone Manually 

git clone https://github.com/MaximeBignolet/nuxt-starter-template.git
cd nuxt-starter-template
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:3000 and you're ready to build 🚀

Key Lessons Learned

1. Lock Critical Dependencies 

{
  "dependencies": {
    "nuxt": "^4.0.0",  // ✅ Minor updates OK
    "vue": "3.5.13"     // ❌ Locked - breaking changes happen
  }
}
Enter fullscreen mode Exit fullscreen mode

Learned this the hard way when a Vue patch broke SSR in production.

2. Document Auto-Imports

Nuxt auto-imports are magical... until a new dev can't find where useAsyncData is defined.

Added a simple comment:

Auto-imported:
- Components from ~/components
- Composables from ~/composables  
- Utils from ~/utils
Enter fullscreen mode Exit fullscreen mode

3. Examples > Documentation

Instead of documenting every config option, I included working examples:

✅ Page with async data fetching

✅ Reusable API call composable

✅ Layout with header/footer

✅ Component using Tailwind utilities

Delete what you don't need. Build on what you do.

Roadmap

Actively maintaining based on real project needs:

  • [ ] Dark mode toggle component
  • [ ] SEO meta management setup
  • [ ] i18n configuration example
  • [ ] Testing setup (Vitest + Playwright)

Not planning to add:

  • CMS integration (too opinionated)
  • Backend setup (everyone's different)
  • Complex state management (add if needed)

Try It Yourself

The template is MIT licensed and completely free to use:

🌐 Live Demo

📦 GitHub Repository

⭐ Give it a star if you find it useful!

Final Thoughts

The best starter template is the one you'd actually use. Not the one with the most GitHub stars or the most features—the one that gets you from idea to working app the fastest.

If you're starting a new Nuxt project and want something production-ready without the bloat, give it a try.

Discussion

What's your experience with starter templates? Do you prefer minimal setups or feature-rich boilerplates? What features would you add to this template?

Drop a comment below! 👇

Connect with me:

Happy coding! 🚀

Top comments (0)