@dreipol/interfaces

default-api-interfaces

This repo shows some default data structure for the APIs.

Installation

npm i @dreipol/interfaces -D

Folder Structure

src/interfaces/api API for data that is coming from the CMS

src/interfaces/cms Interfaces that represent data coming from the backend/cms

src/interfaces/app Some global interface used by the app structure

src/interfaces/router All Vue routing related interfaces

Guide for adding a new interface

Definitions

Extend framework interface

If you have to extends for example the IRouteData interface that is already given from the framework you can do it like this

export {IData} from '@dreipol/interfaces';

export interface IAppRouteData extends IData {
    isHeaderColorPrimary: boolean;
}

Group properties

Group properties together. Seperate primitives and non-primitives props for better readability

DO

export interface IProduct {
    name: string;
    color: string;
    abstract: string;

    product_image: IImage;
    product_logo: IImage;
    specs: IProductSpecs
    link: ILink;
}

DON'T

export interface IProduct {
    name: string;
    product_logo: IImage;
    specs: IProductSpecs
    color: string;
    product_image: IImage;
    abstract: string;
    link: ILink;
}

Use primitive types

DO Use primitve types like string, or number

export interface IImage {
    url: string;
    alt: string;
}

DON'T - Do not use the type String or Number

export interface IImage {
    url: String;
    alt: String;
}

What a default response should look like

Interface

{
    "data": {
        "containers": {
            "main": {
                "type": "cmp-main",
                "plugins": [{}, {}, {}]
            }
        },
        "meta": {
            "title": "Cas Study #2",
            "description": ""
        }
    }
}