Nuxt 4 Starter Template

Note: This is a modified version of the original Nuxt 4 Starter Template updated and maintained by Alvar Laigna. You can find this updated version at github.com/alvarlaigna/nuxt4-starter-template.

A modern Nuxt starter template packed with essential features and best practices. While Nuxt 3 is currently stable, this template is forward-compatible with the upcoming Nuxt 4, incorporating its latest enhancements and development patterns.

This template serves as a future-proof foundation for your projects, allowing you to:

• Leverage upcoming Nuxt 4 features
• Use the latest Tailwind CSS v4 capabilities
• Follow best practices and modern development patterns
• Typescript enabled by default with strict type checking
• Component-driven development with proper documentation
• Built-in performance optimizations

Note

This template is maintained to stay current with Nuxt 4's development progress.

Features

🚀 Core Technologies

• Nuxt - The Intuitive Vue Framework
• Vue - The Progressive JavaScript Framework
• VueUse - Collection of Vue Composition Utilities
• TypeScript - JavaScript with syntax for types
• Vue I18n - Vue.js Internationalization

💅 Styling & UI

• Tailwind 4 - Utility-first CSS framework
• Tailwind Variants - Advanced variant support
• Radix Vue - Unstyled, accessible components
• Nuxt Icons - Icon system
• Nuxt Image - Optimized image handling
• Nuxt Fonts - Web font optimization

🛡️ Security & Quality

• Nuxt Security - Security headers and best practices
• ESLint with Vue/Nuxt recommended configs
• Stylelint for CSS/SCSS linting
• Prettier for consistent code formatting
• Git hooks with Husky
• Automated testing setup with Vitest and Cypress
• TypeScript strict mode enabled

🌐 Internationalization (i18n)

The template includes a fully configured i18n setup:

• Vue I18n integration via plugins
• Translation files in JSON format
• Type-safe translations
• Default English locale
• Easy to add new languages

📝 Example Features

Posts Module

A complete example implementation showcasing:

• REST API integration with JSONPlaceholder
• Server API routes
• Type-safe data fetching
• Loading states
• Error handling
• Responsive layouts
• i18n integration

Default Layout

A responsive layout featuring:

• Accessible navigation
• Mobile-friendly header
• Skip to content link
• Footer with dynamic year
• i18n support

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

1. Clone the repository

git clone https://github.com/yourusername/nuxt4-starter-template.git
cd nuxt4-starter-template

1. Install dependencies

Using yarn (recommended):

yarn install

Or using npm:

npm install

1. Start development server

Using yarn (recommended):

yarn dev

Or using npm:

npm run dev

Development Commands

The following commands work with yarn (recommended) or npm:

# Install dependencies
yarn install        # or: npm install

# Start development server
yarn dev           # or: npm run dev

# Build for production
yarn build         # or: npm run build

# Preview production build
yarn preview       # or: npm run preview

# Run tests
yarn test          # or: npm run test

# Run end-to-end tests
yarn test:e2e      # or: npm run test:e2e

# Lint code
yarn lint          # or: npm run lint

# Fix linting issues
yarn lint:fix      # or: npm run lint:fix

# Format code
yarn format        # or: npm run format

# Type check
yarn typecheck     # or: npm run typecheck

# Clean project
yarn clean         # or: npm run clean

Tip

While this template supports both yarn and npm, we recommend using yarn for better performance and consistent dependency management.

Package Manager Lock Files

This project includes both yarn.lock and package-lock.json files to support both package managers. When using yarn:

• yarn.lock will be updated automatically
• package-lock.json should be ignored

If you switch to npm:

• Delete yarn.lock
• package-lock.json will be generated automatically

Best Practices

This template follows these Vue.js/Nuxt best practices:

• 📦 Component-driven development
• 🔒 Type-safe development with TypeScript
• 🧪 Test-driven development ready
• 🎨 Consistent code style with ESLint/Prettier
• 📱 Mobile-first responsive design
• ♿ Accessibility built-in
• 🚀 Performance optimized

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.