Overview

The Din Nuxt 3 + NuxtContent 2 Starter is a blog template built using TypeScript and Script Setup SFC. It is designed with the Atomic Pattern and is based on the Dim-Nuxt3-Template. The template is fully configured and production-ready, with a focus on code quality and performance. It includes features such as CSS normalization, localization examples, light/dark color modes, and custom error pages. The template also incorporates various tools and frameworks like Pinia, VueUse, Nuxt i18n, SASS, ESLint, Prettier, Cypress, and Vitest.

Features

Full configured and production ready
Google Lighthouse Reports are 100% in green zone
Atomic Design Pattern
Configured public folder (icons, robots.txt, htaccess, humans.txt, etc)
CSS normalization
SCSS Maps and Modules in global scope
Contains simple code examples
ESLint + Prettier for better code quality
Cypress + Vitest for testing
Localization examples
Light / Dark color modes
Custom error page
All Google Lighthouse metrics are green

Requirements

Node.js: >= 16.17.0
npm: >= 9.2.0
Recommended IDE: VSCode + Volar + Vue Dev Tools

Installed Modules

Pinia → Storage
VueUse → Best Collection of Vue Composition Utilities
Nuxt i18n → Internationalization framework
SASS → CSS Preprocessor
ESLint + Prettier → Linting and code formatting
Cypress → End-to-End (e2e) testing framework
Vitest → Unit testing framework

Setup

Install the dependencies
Update packages
Run AFTER the package is installed

Development

Start the development server on http://localhost:3000

Production

Build the application for production (checkout the deployment documentation)

Linting

Run code quality tools

Summary

The Din Nuxt 3 + NuxtContent 2 Starter is a fully configured and production-ready blog template built with TypeScript and Script Setup SFC. It follows the Atomic Design Pattern and includes features such as CSS normalization, localization examples, light/dark color modes, and a custom error page. With a focus on code quality and performance, the template incorporates various tools and frameworks for testing (Cypress, Vitest) and code formatting (ESLint, Prettier). It also requires Node.js and npm as per the specified versions. Overall, the template provides a solid foundation for building a blog application with Nuxt.js.

Demetory

Dim Nuxt Content Blog

Dim Vue3 Template