nuxt-starter

Nuxt 4 Starter

🥸 Why this template?

Get ready to supercharge your development with this fully configured Nuxt 4 Starter Kit! Built on Vue 3, AI ready (including configured CLAUDE.md), powered by TypeScript and many other technologies (for more information see down-below or checkout package.json for even more), this setup comes preloaded with tools and libraries designed to enhance your workflow, streamline development, and maintain high-quality code. 🙌 No more wrestling with configurations—jump straight into building amazing projects!

• Clean up project in seconds: Using the yarn script:cleanup command in your terminal, will clean up the project, remove demo contents - the Starter Kit is designed so that developers can start working immediately without having to spend time setting up basic structures and configurations.
• Up to date: Using up to date dependencies and tools to ensure a smooth development experience. (at least I try ^^)
• Batteries-Included The Starter Kit uses lots of well kind of “standard dependencies” fully configured and ready to go.
• MIT License: Allows commercial use, modification, distribution, and of course private use as well - for more read the MIT License.

–

🚀 What’s Inside?

This starter kit is packed with carefully chosen dependencies to handle real-world scenarios. Here’s why they’re included:

⚡️ Vite

Why? Because it’s blazing fast. Vite ensures instant builds and on-demand compilation, making both development and production smoother and quicker. learn more.

🏗️ Oxlint

Blazing-fast Rust-based linter for JavaScript and TypeScript (including Vue <script> blocks), with 695+ built-in rules. Ships pre-configured in .oxlintrc.json with the typescript and vue plugins enabled — just add your own rules on top. learn more.

💎 Oxfmt

High-performance code formatter from the OXC project, matching Prettier’s output for JS, TS, Vue, CSS, JSON, YAML, and more. Configured in .oxfmtrc.json. Format-on-save is enabled out of the box via the VS Code extension (oxc.oxfmt). learn more.

🧪 Vitest

To test smarter and faster. Vitest is a lightweight, Jest-compatible testing framework that ensures code reliability and helps you catching bugs early. learn more.

🐶 Husky

Husky enforces pre-push hooks, ensuring quality checks are performed before code is pushed to the repository. The pre-push hook runs automated tasks like linting & tests preventing errors in the main branch. This workflow helps catch issues early, ensuring a clean and stable codebase. learn more.

💅 Tailwind CSS

Tailwind CSS is a highly effective utility-first CSS framework that greatly enhances the styling of a Nuxt project. Tailwind’s zero-runtime feature further adds to its performance, making it a valuable addition to a Nuxt project looking to achieve high-quality and optimized styling. learn more.

👩‍🎤 Sass

For flexibility in styling. Use SCSS to add custom styles when needed - SCSS definitions should not use @apply (more information can be found within the tailwind documentation). However using SCSS alongside Tailwind can be an option for stuff like animations or other things that are not solvable convenient using Tailwind (or of course instead of tailwind if this is what you prefer). learn more.

🍍 Pinia

To manage app state easily. Pinia is modern, simple, and works perfectly with Vue 3 and Nuxt 4, for scalable state management. learn more.

🤌 TypeScript

TypeScript enhances the JavaScript language by adding optional static typing and other features, for safer, smarter code - helping avoiding errors and catching bugs early in development. learn more.

📚 Storybook

Storybook streamlines the UI development process by allowing for isolated development of individual components. It provides better visualization and collaboration, making it easier for teams to work together and create a better end product. learn more.

📸 Chromatic

Chromatic is a cloud-based visual testing and review platform built for Storybook. It automatically captures screenshots of every story on each push, diffs them against the baseline, and flags visual regressions for review — catching UI bugs before they reach production. It also hosts your published Storybook so the whole team can browse and review components without a local setup.

To connect your project, set your project token either in chromatic.config.json:

{ "projectId": "your-chromatic-project-token" }

or via an environment variable (useful for CI):

CHROMATIC_PROJECT_TOKEN=your-chromatic-project-token

learn more.

🤖 Claude Code Ready

This starter ships with a pre-configured CLAUDE.md file — the instruction file read by Claude Code (Anthropic’s AI coding assistant). It documents the full project setup: tech stack, directory layout, commands, critical rules, and gotchas. Any Claude Code session in this repo will pick it up automatically, so the AI already knows the conventions, the correct tools (oxlint, oxfmt, Vitest, yarn), and what not to do — no manual briefing required. learn more.

–

🚀 Getting Started

1. Clone or download this repository
2. Ensure you have Node version v22.13.0 up an running
3. Make sure you have yarn version mentioned in the package json in use (or use the package manager of your choice it should also work - in case remove the .npmrc file and execute e.g. corepack use [email protected]).
4. Run yarn install to install dependencies
5. Run yarn dev to start the local development environment

🧹 Comes with Auto-Clean-Script

Nuxt-Starter is delivered with a range of example content – including sample components, tests, and store configurations. If you’d prefer to start with a clean setup, simply run the following CLI command in your terminal yarn script:cleanup - this command offers an easy, one-step process to prepare your Nuxt 4 project for a fresh start.

• It empties the contents of ‘./components’, ‘./tests’ and ./store while keeping the directories intact.
• It completely deletes the ‘./.assets/img’, ‘./coverage’, ‘./.github’, ‘./.vscode’, ‘./.git’ folder, and all its contents. 🚨 Since the .git folder will be deleted your project will be disconnected from this repository.
• The cleaning script is set up to delete itself after execution, ensuring that your project is as lean as possible once you’ve cleaned up the examples - therefor it will delete the script file as well as the npm script ‘script:cleanup’ from the package.json file.
• It will delete the node_modules, .nuxt and .output folders, empty the yarn-cache and reinstall everything from scratch.

–

🤝 Contributing

Feel free to fork this project and submit pull requests — contributions are very welcome!

📜 License

Licensed under the MIT License, by Ali Soueidan.