How to

Requirement

After completing Installation of vuefull-generator, the following can be run

Generate new API + UI

Run the command yo vuefull book which will auto generate the following files. Where book is the model name. It will generate the

  • Database model named book
  • API end point /api/books with GET,POST,PUT,DELETE,EXPORT routes
  • Client routes for list, edit
  • Add the client route to the leftmenu + dashboard
vuefull-api/server/api/book/config.ts
vuefull-api/server/api/book/controller.ts
vuefull-api/server/api/book/index.ts
vuefull-api/server/api/book/model.ts
vuefull-api/server/routes.json

vuefull-client/pages/books/_id.vue
vuefull-client/pages/books/index.vue
vuefull-client/pages/books/config.js
vuefull-client/config/menu.json

API endpoint config

path: vuefull-api/server/api/book/config.ts

It defines the data types of each field.

export const modelName = 'Book'
export const fields = {
    name: 'string',
    author: 'string',
    active: 'boolean',
    price: 'number',
    category: 'string',
    image: 'string',
    isbn: 'string',
    weight: 'string',
    releaseDate: 'date'
}

Reference: https://docs.mongodb.com/manual/reference/bson-types/

UI route config

path: vuefull-client/pages/books/config.js

Contains client settings in key value pair

  • api Name of api e.g. books
  • heading Header of that page

  • fields
    • text The title of the field

    • value The column/attribute name that the API respond with

    • type Type of data that attribute contains

      It could be anything of

      • text
      • number
      • select Require options. e.g. {value: 'category', text: 'Category', type:'select', options: ['Fiction', 'Non fiction', 'Inspirational', 'Novel', 'Science', 'Story']}
      • boolean
      • boolean-label
      • boolean-checkbox
      • currency
      • date
      • array
      • url
      • detail
      • emailmask Masks the field and displays only last 6 characters
      • phonemask Masks the field and displays only last 6 characters

More settings

The component named List accepts the following props

f: Array // fields
no: Object // List of actions to be removed from the listing page
api: String // API endpoint to be queried
heading: String // Heading of the listing page

e.g.

<list
      :f="[{ value: 'name', text: 'Title', type: 'text' }]"
      api="books"
      heading="Available Books"
      :no={clone:true,export:true,delete:true}
    ></list>

The above settings

  • Will list all books in database
  • have the heading as Available Books
  • there will not be option for clone, export & delete