CrudUI (Stack: jQuery + Bootstrap)
CrudUI provides CRUD (Create, Read, Update, Delete) capabilities for a given model. It is designed to work regardless of given backend as long as the backend uses REST conventions.
Dependencies
- jQuery
- Bootstrap 3
Installation
import JQueryBootstrap from './plugins/stacks/jQuery-bootstrap3';
Vue.use(JQueryBootstrap);
import CrudUI from './components/Stacks/jQuery-Bootstrap/CrudUI';
Vue.component('vcCrudUi', CrudUI);
note: the vc prefix can be changed if desired.
Properties
| Property | Type | Example | Description | Required |
|---|---|---|---|---|
| model | string | user | Model name | Required |
| data | string (json) | {"data": [{"name": "david", "email": "[email protected]"},{"name": "john", "email": "[email protected]"}]} | JSON string containing data array of content. | Required |
| columns | string (csv) | name,email | Comma seperated list of columns to output from the data, also serves as columns to create for the edit/create modals | Required |
| endpoint | url | https://example.com/api/model | Base RESTful endpoint | Required |
| backend | string | laravel | This sets the csrf token and other fields required for a given backend | Laravel: Required |
| token | string | - | CSRF Token | Laravel: Required |
| readonly | string (csv) | Same as columns but these fields are only output on the table, not in the edit/create modals (useful for computed values). |
Example
<crud-ui
model="user"
data='{"data": [{ "id": 1, "name": "david" }, { "id": 2, "name": "john" }]}'
columns="name"
endpoint="http://localhost:8080/api/users"
backend="laravel"
token="123456"
></crud-ui>