Majra is a tool for quickly creating CRUD UI.
- Powerful form generator
- Lots of ready fields
- Simplicity in usage
- Extendable
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',
}
});
}
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>
The Majra is open-sourced software licensed under the MIT license.