AwesCode UI Models and Collections Abstract Layer

Based on VueMC

Installation

yarn add @awes-io/vue-mc

Requirements:

• @nuxtjs/axios must be installed in your project

Quick Start

import { BaseModel, BaseCollection } from '@awes-io/vue-mc'

// Define a Model
class Todo extends BaseModel {
    defaults() {
        return {
            id: null,
            title: '',
            done: false
        }
    }

    routes() {
        return {
            fetch: '/api/todos/{id}',
            save: '/api/todos',
            delete: '/api/todos/{id}'
        }
    }
}

// Define a Collection
class Todos extends BaseCollection {
    model() {
        return Todo
    }

    routes() {
        return {
            fetch: '/api/todos'
        }
    }
}

// Usage
const todos = new Todos()
await todos.fetch()

Documentation

Comprehensive documentation is available in the /docs folder:

• Getting Started - Overview and quick start
• Models Guide - Define and use models
• Collections Guide - Manage arrays of models
• Request/Response - HTTP request handling
• Validation - Client and server validation
• API Reference - Complete API documentation

Key Features

• Models: Represent individual entities with attributes, validation, and persistence
• Collections: Manage arrays of models with pagination and filtering
• Axios Integration: Built-in HTTP request/response handling via @nuxtjs/axios
• Validation: Client-side and server-side validation support
• Reactive: Fully reactive with Vue.js
• Lifecycle Hooks: Boot, create, fetch, save, delete events

Development

Build before release

$ yarn build

Ensure to write proper commit message according to Git Commit convention

External Resources

• VueMC Official Documentation
• @nuxtjs/axios Documentation
• AwesCode UI Components