Althought this repo is public and feel free to do what you wish with it, this has been developed for use with websites we develop.

npm install --save srcdev-nuxt-components

defineNuxtConfig({
  extends: "srcdev-nuxt-components",
});

The /assets/styles directory contains a modular CSS architecture designed for scalability and maintainability. The styles are organized into the following structure:

• main.css - Primary entry point that imports all style modules

The setup layer provides the foundational styles and utilities:

• _head.css - Root-level CSS custom properties including:
  • Font size and line height defaults
  • Primary font family stack (futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif)

• Color System - Comprehensive color palette with semantic naming:
  • _blue.css - Blue color scale (--blue-0 to --blue-12)
  • _gray.css - Gray color scale
  • _green.css - Green color scale
  • _orange.css - Orange color scale
  • _red.css - Red color scale
  • _yellow.css - Yellow color scale

• Responsive Font Sizes - Fluid typography using clamp() functions:
  • --step-8 to --step-1 providing 8 responsive font size steps
• Utility Classes - Pre-built typography classes:
  • .page-heading-1 through .page-heading-5 - Semantic heading styles
  • Generic font weight and variation settings
• Font Variation Settings - Advanced typography controls

• Spacing Helpers:
  • _margin-helpers.css - Comprehensive margin utilities (.mi-auto, .mb-0, etc.)
  • _padding-helpers.css - Padding utility classes
• Page Layout - Base page styling (_page.css)

• Screen Reader Utilities - .sr-only class for accessible hidden content
• A11y Variables - Accessibility-focused CSS custom properties
• Utility Functions - Helper classes for improved accessibility

Component-specific styles for the included components:

• _scaffolding.css - Core component structure with CSS custom properties:
  • Wrapper styling (border-radius, layout)
  • Inner content styling (margin, padding, gap)
  • Icon sizing and positioning
  • Content spacing and typography
• Themes - Pre-built component variants:
  • _error.css - Error state styling
  • _info.css - Information state styling
  • _success.css - Success state styling
  • _warning.css - Warning state styling

The styles follow a cascading import pattern:

main.css
├── setup/
│   ├── index.css
│   ├── _head.css
│   ├── utility-classes/
│   │   ├── index.css
│   │   ├── _margin-helpers.css
│   │   ├── _padding-helpers.css
│   │   └── _page.css
│   ├── a11y/
│   │   ├── index.css
│   │   ├── _utils.css
│   │   └── _variables.css
│   ├── variables/
│   │   ├── index.css
│   │   └── colors/
│   │       ├── index.css
│   │       ├── _blue.css
│   │       ├── _gray.css
│   │       ├── _green.css
│   │       ├── _orange.css
│   │       ├── _red.css
│   │       └── _yellow.css
│   └── typography/
│       ├── index.css
│       ├── utility-classes/
│       │   ├── index.css
│       │   ├── _generic-font-classes.css
│       │   ├── _generic-font-variation-settings.css
│       │   └── _generic-font-weights.css
│       └── vars/
│           ├── index.css
│           └── _reponsive-font-sizes.css
└── extends-layer/srcdev-components/
    ├── index.css
    ├── display-prompt-core/
    │   └── index.css
    └── themes/
        ├── index.css
        ├── _error.css
        ├── _info.css
        ├── _success.css
        └── _warning.css

This architecture ensures proper CSS cascade order and allows for easy customization through CSS custom properties.

The .vscode directory contains Visual Studio Code configuration files to ensure a consistent development experience across the project:

• settings.json - VS Code workspace settings including:
  • Code formatting configuration (2-space indentation, auto-formatting on save)
  • ESLint, Prettier, and Stylelint integration
  • File handling settings (trim whitespace, final newlines, Unix line endings)
  • CSS variable recognition for the project's custom properties

• extensions.json - Curated list of VS Code extensions for optimal development:
  • Vue.js Development: vue.volar - Vue 3 language support
  • Nuxt.js Development: nuxtr.nuxtr-vscode - Enhanced Nuxt development tools
  • Code Quality: dbaeumer.vscode-eslint, esbenp.prettier-vscode - Linting and formatting
  • CSS Development: willofindie.vscode-cssvar - CSS custom property IntelliSense
  • Testing: vitest.explorer - Vitest test runner integration
  • Markdown: davidanson.vscode-markdownlint - Markdown linting
  • Productivity: jkjustjoshing.vscode-text-pastry, formulahendry.auto-rename-tag

The .vscode directory includes comprehensive code snippets for rapid component development:

• srcdev-nuxt3-component-boilerplate.code-snippets - Base component template with prop validation
• srcdev-nuxt3-page-layout.code-snippets - Page layout scaffolding
• srcdev-nuxt3-pinia-store-setup.code-snippets - Pinia store configuration

• srcdev-nuxt3-accordian-component.code-snippets - Accordion component templates
• srcdev-nuxt3-carousel-basic-component.code-snippets - Basic carousel implementation
• srcdev-nuxt3-carousel-flip-component.code-snippets - Flip carousel variant
• srcdev-nuxt3-container-glow-component.code-snippets - Container with glow effects
• srcdev-nuxt3-dialog-component.code-snippets - Modal dialog templates
• srcdev-nuxt3-display-banner-component.code-snippets - Display banner component
• srcdev-nuxt3-display-details-component.code-snippets - Collapsible details component
• srcdev-nuxt3-display-prompt-component.code-snippets - Alert/notification prompts
• srcdev-nuxt3-expanding-panel-component.code-snippets - Expandable panel component
• srcdev-nuxt3-layout-row.code-snippets - Layout row component
• srcdev-nuxt3-responsive-header-component.code-snippets - Responsive navigation header
• srcdev-nuxt3-tabs-component.code-snippets - Tab component system

Each snippet provides both HTML template usage examples and TypeScript setup code, enabling developers to quickly implement components with proper typing and configuration.