Dim Nuxt Content Blog
Nuxt 3 + Nuxt-Content 2 Blog Template
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.
- Nuxt
nuxt.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- Blog
Blog websites feature posts written by one or more authors, organized by categories and tags, with a section for comments and archives sorted by date or topic. Additional features may include search bar, social media sharing, subscription or RSS feed, about and contact pages, and visual content.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.