Nuxt Core Template 🚀

Enterprise-grade Nuxt 3 Starter Template

Accelerate your Next Web Project with Production-Ready Foundation

🌟 Key Features

Core Technologies

Technology	Description
	SSR/SSG/Hybrid Rendering
	Composition API Ecosystem
	Strict Type Checking

---

Main Modules

Core Nuxt Modules

Module	Purpose	Docs
@nuxt/devtools	Development Experience Toolkit	Docs
@nuxt/icon	Icon Management System	Docs
@nuxtjs/device	Device Detection	Docs
@nuxtjs/stylelint-module	CSS/SCSS Quality Control	Docs
@nuxt/eslint	Code Standardization	Docs

Development Essentials

Module	Purpose	Docs
es-toolkit	Modern Lodash Alternative	Docs
mitt	Event Bus Implementation	Docs
@vueuse/nuxt	Reactive Utilities	Docs

Validation & Type Safety

Module	Purpose	Docs
ajv + ajv-keywords	JSON Schema Validation	Docs
yup	Form Schema Definition	Docs

Quality Assurance

Module	Purpose	Docs
@chromatic-com/storybook	Visual Testing	Docs
@storybook/*	Component Isolation	Docs

🛠 Project Architecture

├── app/
│   ├── assets/stylesheets # SCSS Foundation
│   ├── components/core # Global Components
│   ├── pages # Route System
│   └── api # Auto-imported API Composables
├── environments/ # Multi-stage Configs
└── shared/ # Business Logic Helpers

✨ Special Features

Custom Innovations

1. Dynamic Icon System
   Auto-generated types from ~/assets/icon with IDE support

2. Core Scope Component

   <core-scope>
     <!-- Global context initialization -->
   </core-scope>
   
   

🔐 Validation Ecosystem

Unified Data Validation Flow

1. Frontend Validation (YUP + VeeValidate)

<script setup lang="ts">
import { useForm } from 'vee-validate'
import * as yup from 'yup'

// Unified validation schema
const schema = yup.object({
 email: yup.string().required().email(),
 age: yup.number().min(18).max(99),
 metadata: yup.object({
   preferences: yup.array().of(yup.string())
 })
});

const { handleSubmit } = useForm({
 validationSchema: schema
});

const onSubmit = handleSubmit((values) => {
 // Submit to API
});
</script>

<template>
 <form @submit="onSubmit">
   <Field name="email" type="email" />
   <ErrorMessage name="email" />
   
   <button type="submit">Submit</button>
 </form>
</template>

2. Backend Schema Validation (AJV)

// shared/ajv/schemas/user.ts
import { defineSchema } from 'ajv'

export const userSchema = defineSchema({
  type: 'object',
  properties: {
    email: { type: 'string', format: 'email' },
    age: { type: 'number', minimum: 18, maximum: 99 },
    metadata: {
      type: 'object',
      properties: {
        preferences: {
          type: 'array',
          items: { type: 'string' }
        }
      },
      required: ['preferences']
    }
  },
  required: ['email', 'age'],
  additionalProperties: false
});

📦 Installation

# Using Node Version Manager
nvm install && nvm use

# Environment Setup
cp ./environments/local.env .env

🚀 Development

# Start Dev Server
npm run dev

# Storybook
npm run storybook

# Production Build
npm run build && node .output/server/index.mjs

📚 Documentation

Section	Description
Architecture Guide	Project Structure Philosophy
Style Guide	SCSS Methodology
Validation System	JSON Schema Validation

🤝 Contributing

We welcome contributions! Please follow our Contribution Guidelines and read our Code of Conduct.

License

MIT © Garanin Fedor

---