@awes-io/ui

@awes-io/ui

UI component library for AwesCode UI applications built with Vue.js and Nuxt.js.

Overview

This package provides a comprehensive set of reusable UI components organized using atomic design principles. Components are categorized into atoms, molecules, organisms, pages, and layouts, each serving a specific purpose in building user interfaces.

Installation

npm install @awes-io/ui
# or
yarn add @awes-io/ui

Setup

Nuxt.js

Add the module to your nuxt.config.js:

export default {
  modules: [
    '@awes-io/ui'
  ],
  
  // Required: Enable components
  components: true,
  
  // Required: Enable Vuex store
  store: true
}

Configuration

Create an awes.config.js file in your project root to customize component defaults:

export default {
  // Default theme configuration
  logo: {
    src: '/logo.svg',
    alt: 'My App'
  },
  
  // Component-specific configuration
  AwButton: {
    size: 'md',
    color: 'accent',
    theme: 'solid'
  },
  
  // Dark theme overrides
  dark: {
    logo: {
      src: '/logo-dark.svg'
    }
  }
}

Component System

Architecture

Components are organized into 5 categories:

1. Atoms - Basic building blocks (inputs, buttons, icons)
2. Molecules - Simple combinations of atoms
3. Organisms - Complex, feature-specific components
4. Pages - Complete page layouts
5. Layouts - Root-level layout components

Import Methods

• Global: Atoms and most molecules are automatically registered and available everywhere
• Dynamic: Organisms, pages, and layouts are dynamically imported for better performance

See docs/index.md for complete component listing.

Quick Start

Basic Usage

<template>
  <AwPage title="My Page">
    <AwCard title="Card Title">
      <AwInput v-model="name" label="Name" />
      <AwButton @click="submit">Submit</AwButton>
    </AwCard>
  </AwPage>
</template>

With Layout

<template>
  <AwLayout>
    <AwPage title="Dashboard">
      <!-- page content -->
    </AwPage>
  </AwLayout>
</template>

Features

• Atomic Design - Organized component hierarchy
• Global & Dynamic Imports - Optimized loading strategy
• Vuex Integration - Built-in store module for navigation and state
• Dark Theme Support - Automatic theme switching
• Responsive Design - Mobile-first with breakpoint utilities
• TypeScript Ready - Full TypeScript support
• Accessible - ARIA attributes and keyboard navigation
• Customizable - Extensive configuration options

Documentation

• Component Documentation - Complete component reference
• Examples - Live usage examples
• Configuration Guide - Default configurations

Store Module

The library includes a Vuex store module (awesIo) that manages:

• Navigation menus
• Route tracking
• Dark theme state
• Screen breakpoints
• User profile data

Access via $store.getters['awesIo/mainMenu'] or use the provided getters.

Plugins

The module automatically registers several Nuxt plugins:

• Core - $awes config and $notify notifications
• Screen - $screen responsive breakpoints
• Router - Extended router methods
• Dark Theme - Theme management
• Permissions - CASL integration
• Day.js - Date handling

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Development

# Install dependencies
yarn install

# Run examples
cd examples
yarn dev

License

See LICENSE file for details.