Skip to content

A Vue.js Tool For Lazy Programmers. Create your CRUD fast.

Notifications You must be signed in to change notification settings

MOAB7698/majra

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

majra

vue vue

About Majra

Majra is a tool for quickly creating CRUD UI.

  • Powerful form generator
  • Lots of ready fields
  • Simplicity in usage
  • Extendable

Install Majra

npm i --save majra

in vue applications

import Vue from "vue";
import Majra from "majra";

Vue.use(Majra, {
  store,
  configs: {UPLOAD_PATH: "/admin/upload"}
});

in nuxt applications

import Vue from 'vue';
import Majra from 'majra';

export default async ({store}) => {
  Vue.use(Majra, {
    store,
    configs: {
      UPLOAD_PATH: 'http://localhost:8000/admin/upload',
    }
  });
}

Usage

simple example

<template>
  <DynamicTemplate/>
</template>

<script>
import {DynamicTemplate} from "majra";

export default {
  components: {
    DynamicTemplate,
  },

  beforeCreate() {
    this.$majra.init({
      mainRoute: "/product",
      relations: ['/get-menus-list'],
      fields: [
        {
          title: "Product name",
          field: "name",
          type: "text",
          isHeader: true,
        },
        {
          title: "Menu",
          field: "menu",
          sendKey: "menu_id",
          type: "select",
          rel: {
            model: "Menu",
          },
          props: {
            "item-text": "title",
            "item-value": "id",
          },
          isHeader: true,
        },
      ],
    });
  },
};
</script>

You can also use the form builder

<template>
  <DynamicForm
      :form="form"
      :fields="fields"
  />
</template>

<script>
import {DynamicForm} from "majra";

export default {
  components: {
    DynamicForm,
  },
  data: () => ({
    fields: [
      {
        title: "Product name",
        field: "name",
        type: "text",
        isHeader: true,
      },
      {
        title: "Menu",
        field: "menu",
        sendKey: "menu_id",
        type: "select",
        rel: {
          model: "Menu",
        },
        props: {
          "item-text": "title",
          "item-value": "id",
        },
        isHeader: true,
      },
    ],
  })
};
</script>

License

The Majra is open-sourced software licensed under the MIT license.

About

A Vue.js Tool For Lazy Programmers. Create your CRUD fast.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Vue 77.2%
  • JavaScript 22.1%
  • HTML 0.7%