Nuxt 4 Starter Template - Forked & Enhanced

A future-ready, forked Nuxt 4 Starter Template, meticulously enhanced with state-of-the-art features and development practices.

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

[Top]

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.