The Nuxt 4 Starter Template is a forward-compatible, rigorously enhanced framework designed to harness the potential of upcoming Nuxt features while retaining seamless compatibility with Nuxt 3. Maintained by Alvar Laigna, this project is a refined fork of Tauno Hanni original template—used here.
This forked repository includes:
- Futuristic Nuxt 4 functionalities, merged with Nuxt 3 stable foundation
- Strict TypeScript modes for dependable type-safety
- Tailwind CSS v4 with progressive styling methodologies
- Preconfigured Security & Performance adjustments for modern web standards
Repository
- Live demo: https://nuxt-starter-template.houseoflaigna.com/
- GitHub (Forked & Maintained by Alvar Laigna): nuxt4-starter-template
- Original by Tauno Hanni: nuxt4-starter-template
Overview
This robust starter kit underscores advanced front-end engineering principles and forward-compatible best practices. It integrates the latest enhancements in Nuxt and Vue ecosystems, ensuring that your projects remain technologically relevant for years to come.
Key Highlights
- Upcoming Nuxt 4 Features: Implement cutting-edge functionalities aligned with future Nuxt updates.
- Tailwind CSS v4: Leverage progressive design patterns while maintaining a utility-first approach.
- Strict TypeScript: Embrace safer coding practices through comprehensive type checking.
- Documentation & Example Modules: Start your project on solid ground, with in-depth references and guided examples.
- Performance & Security: Pre-tuned optimizations and best practices ensure swift and secure deployments.
Features
🚀 Core Technologies
- Nuxt – The intuitive meta-framework built atop Vue.
- Vue – A progressive JS framework for building user interfaces.
- VueUse – An extensive library of composition utilities.
- TypeScript – Enhanced JavaScript with robust typing.
- Vue I18n – Seamless internationalization support.
💅 Styling & UI
- Tailwind CSS v4 – A utility-first framework offering enhanced styling paradigms.
- Tailwind Variants – Advanced variant utilities for more nuanced CSS control.
- Radix Vue – Unstyled, accessible components for flexible UI design.
- Nuxt Icons – Streamlined icon system.
- Nuxt Image – Optimized image management.
- Nuxt Fonts – Efficient web font optimization.
🛡️ Security & Quality
- Nuxt Security – Curated security headers and best practices.
- ESLint with recommended Vue/Nuxt configs.
- Stylelint for CSS/SCSS consistency.
- Prettier for standardized code formatting.
- Git Hooks with Husky to enforce best practices.
- Automated Testing via Vitest and Cypress.
- Strict TypeScript Mode for safer code.
🌐 Internationalization (i18n)
Includes a robust, type-safe i18n configuration for multi-locale support:
- Built with Vue I18n.
- JSON-based translation files.
- Simple to introduce additional languages.
- Default English locale.
Example Features
Posts Module
A fully operational demonstration of API integration, showcasing:
- REST-based data fetching from JSONPlaceholder.
- Server API routes for data abstraction.
- Type-safe approach to both client and server interactions.
- Responsive layout strategies and error handling.
- Integration with i18n for effortless localization.
Default Layout
Provides an accessible, mobile-first UI structure that includes:
- A skip-to-content link to enhance accessibility.
- Dynamic header and footer with integrated i18n support.
- Effortless adaptability for new site sections.
Project Structure
├── app/
│ ├── components/ # Vue components
│ ├── composables/ # Shared composition logic
│ ├── layouts/ # Page layouts
│ │ └── default.vue # Default layout with header and footer
│ ├── locales/ # i18n translation files
│ ├── middleware/ # Route middleware
│ ├── pages/ # Application pages
│ │ ├── index.vue # Home page
│ │ └── posts/ # Posts feature pages
│ ├── plugins/ # Vue plugins
│ │ └── i18n.ts # i18n configuration
│ ├── stores/ # State management
│ └── utils/ # Utility functions
├── public/ # Static assets
├── server/ # Server routes/middleware
│ └── api/ # API endpoints
└── tests/ # Test files
Getting Started
Prerequisites
- Node.js (≥18.19.0)
- Yarn (≥1.22.0) [recommended] or npm
Installation
- Clone the repository:
git clone https://github.com/alvarlaigna/nuxt4-starter-template
cd nuxt4-starter-template
- Install dependencies:
- Using Yarn (recommended):
yarn install
- Or using npm:
npm install
- Start the development server:
- Using Yarn (recommended):
yarn dev
- Or using npm:
npm run dev
Development Commands
Below commands assume Yarn as the primary package manager but npm is equally supported.
# Install dependencies
yarn install # npm install
# Start development server
yarn dev # npm run dev
# Build for production
yarn build # npm run build
# Preview production build
yarn preview # npm run preview
# Run tests
yarn test # npm run test
# Run end-to-end tests
yarn test:e2e # npm run test:e2e
# Lint code
yarn lint # npm run lint
# Fix linting issues
yarn lint:fix # npm run lint:fix
# Format code
yarn format # npm run format
# Type checking
yarn typecheck # npm run typecheck
# Clean project
yarn clean # npm run clean
Tip: If you switch between Yarn and npm, remember to remove the redundant lock file to avoid dependency conflicts.
Best Practices
- Component-Driven Development with logically partitioned Vue components.
- Type-Safe codebase empowered by robust TypeScript.
- Test-Ready environment with Vitest and Cypress.
- Consistent Code Style enforced by ESLint and Prettier.
- Mobile-First Design to ensure an optimal experience across devices.
- Accessibility considerations woven into the UI.
- Performance Optimizations aligning with core Nuxt guidelines.
For any inquiries, suggestions, or contributions, please open an issue or submit a pull request on the GitHub repository.