Dim Nuxt Content Blog

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

Installation

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

1. Install the dependencies
2. Update packages
3. 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.