<h1>I Built a Nuxt 4 Starter Template I’d Actually Use in Production</h1>
After a year of building Nuxt apps professionally, I got tired of repeating the same setup for every project. So I made a starter template that cuts the bullshit—just the essentials, production-ready.
📦 <a href="https://github.com/MaximeBignolet/nuxt-starter-template" target="_blank" rel="noopener nofollow">GitHub</a>
<h2>The Problem</h2>
Most templates are either:
<ul>
<li>Too minimal – Framework only, you configure everything</li>
<li>Too bloated – 50 dependencies, complex setup, half you’ll delete</li>
</ul>
I needed the middle ground: production-ready without the bloat.
<h2>What’s Inside</h2>
<ul>
<li>Nuxt 4 – Latest stable</li>
<li>TypeScript – Strict mode (no escaping with <code>any</code>)</li>
<li>TailwindCSS 4 – New engine, already stable in production</li>
<li>ESLint – Configured but not annoying</li>
<li>Clean architecture – Logical folder structure</li>
</ul>
<h2>Key Decisions</h2>
<h3>1. TypeScript Strict from Day One</h3>
<pre><code>&quot;strict&quot;: true,
&quot;noUncheckedIndexedAccess&quot;: true
</code></pre>
Adding strict mode later is painful. Start right, stay right.
<h3>2. TailwindCSS 4 Already?</h3>
Yes. Been using it for 2 months in production. The new engine is noticeably faster, and the syntax is cleaner. No regrets.
<h3>3. What I DIDN’T Include</h3>
This matters more than what’s in it:
❌ No auth – Every project needs different auth
❌ No state library – Nuxt’s <code>useState</code> covers 90% of cases
❌ No UI library – Tailwind + headless components = more flexibility
❌ No example bloat – Just enough to show structure
Add what you actually need, not what might be useful someday.
<h2>Real Numbers</h2>
From production use:
<ul>
<li>⚡ Dev server: ~2 seconds</li>
<li>📦 Build time: ~30 seconds</li>
<li>🎨 TypeScript caught: 47 bugs in first week I would have shipped</li>
<li>💾 Bundle size: ~85KB gzipped</li>
</ul>
<h2>Folder Structure</h2>
<pre><code>app/
├── components/ # Auto-imported
├── composables/ # Reusable logic
├── layouts/ # App layouts
├── pages/ # File-based routing
└── utils/ # Helpers
</code></pre>
No <code>src/</code> directory. Nuxt 4’s structure is cleaner without it.
<h2>ESLint That Works</h2>
Most templates either skip ESLint or make it so strict you fight with it constantly.
My config catches real bugs without yelling about style:
<pre><code>rules: {
 &#x27;vue/multi-word-component-names&#x27;: &#x27;off&#x27;,
 &#x27;@typescript-eslint/no-unused-vars&#x27;: &#x27;warn&#x27;
}
</code></pre>
<h2>Lessons from Real Projects</h2>
1. Lock critical dependencies
<pre><code>&quot;vue&quot;: &quot;3.5.13&quot; // ❌ Locked - patch broke SSR once
</code></pre>
2. Document auto-imports
New devs get confused by Nuxt magic. I added a simple comment explaining what’s auto-imported.
3. Examples &gt; Docs
Instead of config guides, I included:
<ul>
<li>Page with async data</li>
<li>API call composable</li>
<li>Layout with header/footer</li>
<li>Styled component</li>
</ul>
Delete what you don’t need. Build on what you do.
<h2>Use It</h2>
<pre><code># GitHub template feature
https://github.com/MaximeBignolet/nuxt-starter-template/generate

# Or clone
git clone https://github.com/MaximeBignolet/nuxt-starter-template.git
npm install &amp;&amp; npm run dev
</code></pre>
MIT licensed. Use it anywhere.
<h2>What’s Next</h2>
Actively maintaining based on real use:
<ul>
<li>[ ] Dark mode example</li>
<li>[ ] SEO setup</li>
<li>[ ] Testing config (Vitest + Playwright)</li>
</ul>
Not adding: CMS integration, backend setup, complex state management. Too opinionated.
<hr>
The best starter template is the one you’d actually use. Not the one with the most stars.
Try it. Improve it. Ship it.
What’s your take on starter templates? Minimal or feature-rich? 👇
<hr>
📦 <a href="https://github.com/MaximeBignolet/nuxt-starter-template" target="_blank" rel="noopener nofollow">GitHub</a> • 👨‍💻 <a href="https://maximedev.fr" target="_blank" rel="noopener nofollow">Portfolio</a>
#nuxt #vue #typescript #tailwindcss #webdev #opensource

Maxime Bignolet

A production-ready Nuxt 4 starter template built from real project experience, designed to avoid both the too-minimal and too-bloated extremes. It includes Nuxt 4, TypeScript in strict mode, TailwindCSS 4, and a clean folder structure—deliberately excluding auth, state libraries, and UI frameworks. Key decisions are explained with real metrics: ~2s dev server, ~30s build time, ~85KB gzipped bundle, and 47 TypeScript-caught bugs in the first week. Lessons include locking critical dependencies, documenting auto-imports, and preferring working examples over config guides.

Building a Production-Ready Nuxt 4 Starter Template: Lessons from Real Projects