{"id":17441184,"url":"https://github.com/tmigone/vuetify-easy-crud","last_synced_at":"2026-02-07T00:33:39.893Z","repository":{"id":37724697,"uuid":"190664020","full_name":"tmigone/vuetify-easy-crud","owner":"tmigone","description":"Easy CRUD tables plugin for Vuetify framework. Demo at: https://vuetify-easy-crud.now.sh/","archived":false,"fork":false,"pushed_at":"2023-01-03T23:36:33.000Z","size":1451,"stargazers_count":2,"open_issues_count":21,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-19T19:59:18.899Z","etag":null,"topics":["crud","data-table","easy","fragment","table","vue","vuejs","vuetify"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tmigone.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-06T23:41:45.000Z","updated_at":"2024-10-18T01:31:26.000Z","dependencies_parsed_at":"2023-02-01T13:46:16.546Z","dependency_job_id":null,"html_url":"https://github.com/tmigone/vuetify-easy-crud","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmigone%2Fvuetify-easy-crud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmigone%2Fvuetify-easy-crud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmigone%2Fvuetify-easy-crud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmigone%2Fvuetify-easy-crud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tmigone","download_url":"https://codeload.github.com/tmigone/vuetify-easy-crud/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247614969,"owners_count":20967174,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["crud","data-table","easy","fragment","table","vue","vuejs","vuetify"],"created_at":"2024-10-17T15:10:28.101Z","updated_at":"2026-02-07T00:33:34.862Z","avatar_url":"https://github.com/tmigone.png","language":"Vue","readme":"# :sparkles: Vuetify Easy Crud\n\nVuertify Easy Crud extends [vuetify's](https://vuetifyjs.com) `v-data-table` component to provide easier handling of CRUD operations with less boilerplate code.\n\nWhat component to use?\n- just vuetify: `vec-table`\n- vuetify + vuex: `vex-table`\n- vuetify + vuex + firestore: `vef-table`\n\n\n# Example\n\nFor a complete working example with code, check out [vuetify-easy-crud-example](https://github.com/tomasmigone/vuetify-easy-crud-example).\n\n\n# Requirements\n\n### Vuetify\nVuetify is included as peer dependency. This means that you must install them yourself. NPM will warn you if they are not present in your project.\n\nFor instructions on how to install Vuetify please visit [this quick start guide](https://vuetifyjs.com/en/getting-started/quick-start).\n\nIf you are using Vuetify's a la carte system you need to import the following components:\n- VDataTable\n- VCard, VCardTitle, VCardText, VCardActions\n- VDialog, VTextField, VBtn, VIcon\n- VSpacer\n\n### Vuex\nIf you want to use `vex-table` you need to install `vuex`, visit this [link](https://vuex.vuejs.org/installation.html) for instructions.\n\n### Vuex Easy Firestore\nIf you want to use `vef-table` you need to install `vuex-easy-firestore` and `firebase`, visit this [link](https://mesqueeb.github.io/vuex-easy-firestore/setup.html#installation) for instructions.\n\n\n# Installation\nInstall it with `NPM` by running: \n```bash\nnpm install --save @tmigone/vuetify-easy-crud\n```\n\n# Setup\n\n### Global installation\n\nIn your `main.js` file include the following lines: \n\n```javascript\nimport VuetifyEasyCrud from '@tmigone/vuetify-easy-crud'\n\nconst options = {\n  globalMixins: false\n}\n\nVue.use(VuetifyEasyCrud, options)\n```\n\nThis will register all components globaly. If `globalMixins` is set (the default is false) to true then mixins will also be globally registered (but you probably shouldnt do this).\n\n\n### Single component\nYou can also pick and import specific components locally doing:\n\n```javascript\nimport { VecTable, VecFragment, VecFormMixin } from '@tmigone/vuetify-easy-crud'\n```\n\n\n# Components\n\n## Vuetify Easy CRUD Table (vec-table)\nThe `vec-table` component is a regular tabular data table with easy CRUD capabilities.\n\n### Usage\n```html\n    \u003cvec-table\n      :title=\"'Table title'\"\n      :items=\"items\"\n      :headers=\"['firstname', 'lastname']\"\n      @add-item=\"addItem\"\n      @update-item=\"updateItem\"\n      @delete-item=\"deleteItem\"\n    \u003e\n      \u003ctemplate v-slot:list-view=\"props\"\u003e\n        \u003clist-view :item=\"props.item\"\u003e\u003c/list-view\u003e\n      \u003c/template\u003e\n      \u003ctemplate v-slot:create-form=\"props\"\u003e\n        \u003ccreate-form\u003e\u003c/create-form\u003e\n      \u003c/template\u003e\n      \u003ctemplate v-slot:update-form=\"props\"\u003e\n        \u003cupdate-form :item=\"props.item\"\u003e\u003c/update-form\u003e\n      \u003c/template\u003e\n    \u003c/vec-table\u003e\n```\n\n### Properties\n\n```vec-table``` accepts the following properties: \n\n| Prop | Description |\n| --- | --- |\n| `title` | (optional) Display name for the table. |\n| `items` | (required) Array of objects representing the table items. |\n| `headers` | (optional) Array of objects representing the table headers. See below for more options. |\n| `disableSearch` | (optional) Disable search functionality. Default: false. |\n| `disableCreateAction` | (optional) Disable create new item functionality. Default: false. |\n| `disableEditAction` | (optional) Disable edit item functionality. Default: false. |\n| `disableDeleteAction` | (optional) Disable delete item functionality. Default: false. |\n\nHeaders can be provided in two formats:\n- As a string array: ```[ 'header1', 'header2' ]```\n- As an array of objects with the following properties:\n```\n{\n  align: \"left/center/right\",\n  sortable: true/false,         // Requires value to be set\n  text: \"column name\",\n  value: \"value to sort by\"\n}\n```\n- If no headers are provided, the component will use the object keys from the first table item.\n \n### Slots\n\nYou can customize creation, read and update operations via slots. All of the slots are optional, though you should disable the corresponding action if you plan on not using one of them.\n\n| Slot | Description |\n| --- | --- |\n| `list-view` | (optional) Slot to customize each table row. `\u003ctd\u003e` tags must be enclosed in a `\u003cvec-fragment\u003e`, see component below. Receives `props.item` with the given item object. If not provided, item keys will be assigned to each column based on the header `value` property. |\n| `update-form` | (required) Slot to customize the item update form. Receives `props.item` with the given item object. |\n| `create-form` | (required) Slot to customize the item creation form. |\n\nWhen building your custom `create-form` or `update-form` you will also need to extend your component with `vec-form-mixin`. See the mixin section below to learn how to integrate with it.\n\n### Events\n\nEach CRUD operation performed on the data fires an event. This component does not alter the data it's given. It's up to the user to decide what to do with it:\n\n| Event | Description |\n| --- | --- |\n| `add-item` | Emitted when a create-form is submitted. Payload: `item` object. |\n| `update-item` | Emitted when an update-form is saved. Payload: `item` object. |\n| `delete-item` | Emitted when an item is deleted. Payload: `item` object. |\n\n## Vuetify Easy CRUD Fragment (vec-fragment)\nThe `vec-fragment` is an auxiliary component used to customize the `list-view` slot component. The `list-view` component needs to return multiple `\u003ctd\u003e` elements at the root level. This functionality is currently planned to be implemented on [Vue 3.0](https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf). Until then, this component uses [vue-fragments](https://www.npmjs.com/package/vue-fragments) to achieve the same result.\n\n### Usage\n```html\n\u003ctemplate\u003e\n  \u003cvec-fragment\u003e\n    \u003ctd\u003e{{ item.firstname }}\u003c/td\u003e\n    \u003ctd\u003e{{ item.lastname }}\u003c/td\u003e\n  \u003c/vec-fragment\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  props: {\n    item: { type: Object, required: true, default: () =\u003e { } }\n  }\n}\n\u003c/script\u003e\n```\n\n## \"Vuetify Easy CRUD Table\" Easy Vuex (vex-table)\n\n`vex-table` component extends the functionality of `vec-table` by adding integration with Vuex store.\nThe component uses a getter to obtain initial data and dispatches add/update/delete actions for CRUD operations.\nVuex setup and implementation need to be implemented separately.\n\n### Usage\n```html\n    \u003cvex-table\n      module=\"moduleName\"\n      title=\"Table title\"\n      :headers=\"['firstname', 'lastname']\"\n    \u003e\n      \u003ctemplate v-slot:list-view=\"props\"\u003e\n        \u003clist-view :item=\"props.item\"\u003e\u003c/list-view\u003e\n      \u003c/template\u003e\n      \u003ctemplate v-slot:create-form=\"props\"\u003e\n        \u003ccreate-form\u003e\u003c/create-form\u003e\n      \u003c/template\u003e\n      \u003ctemplate v-slot:update-form=\"props\"\u003e\n        \u003cupdate-form :item=\"props.item\"\u003e\u003c/update-form\u003e\n      \u003c/template\u003e\n    \u003c/vex-table\u003e\n```\n\n### Properties\n```vex-table``` accepts the following properties: \n\n| Prop | Description |\n| --- | --- |\n| `module` | (required) Vuex module name. |\n| `title` | (optional) Display name for the table. |\n| `headers` | (optional) Array of objects representing the table headers. Shared options with `vec-table`. |\n| `getter` | (optional) Name of the getter to obtain initial data. Default: `\u003cmodule\u003e/get` |\n| `add` | (optional) Name of the action to add an item. Default: `\u003cmodule\u003e/add` |\n| `update` | (optional) Name of the action to update an item. Default: `\u003cmodule\u003e/update` |\n| `delete` | (optional) Name of the action to delete an item. Default: `\u003cmodule\u003e/delete` |\n| `deleteByField` | (optional) Name of field by which items are identified on a delete action. Default: `id` |\n\n### Slots\nSee `vec-table` slots.\n\n### Events\nAs stated, this component dispatches events to the vuex store. Again, it's up to the user to provide the proper vuex store actions, mutations, etc.\n\n| Event type | Default event name | Description |\n| --- | --- | --- |\n| `get` | `get` | (getter) Used to obtain initial data. Payload: none. |\n| `add` | `add` | Dispached when an item is added. Payload: `item` object. |\n| `update` | `update` | Dispached when an item is updated. Payload: `item` object. |\n| `delete` | `delete` | Dispached when an item is deleted. Payload: Unique identifier for the item: `item[deleteByField]`. |\n\n## \"Vuetify Easy CRUD Table\" Easy Firestore (vef-table)\n\n`vef-table` component extends the functionality of `vec-table` by adding integration with Google Firestore.\nThe component uses getters and actions already established by `vuex-easy-firestore` to automatically handle CRUD operations.\nBoth Vuex and Vuex Easy Firestore setup and implementation need to be implemented separately.\n\n### Usage\n```html\n    \u003cvef-table module=\"moduleName\" title=\"Table title\" :headers=\"['firstname', 'lastname']\"\u003e\n      \u003ctemplate v-slot:create-form=\"props\"\u003e\n        \u003ccreate-form\u003e\u003c/create-form\u003e\n      \u003c/template\u003e\n      \u003ctemplate v-slot:update-form=\"props\"\u003e\n        \u003cupdate-form :item=\"props.item\"\u003e\u003c/update-form\u003e\n      \u003c/template\u003e\n    \u003c/vef-table\u003e\n```\n\n### Properties\n```vex-table``` accepts the following properties: \n\n| Prop | Description |\n| --- | --- |\n| `module` | (required) Firestore module name. |\n| `title` | (optional) Display name for the table. |\n| `headers` | (optional) Array of objects representing the table headers. Shared options with `vec-table`. |\n\n### Slots\nSee `vec-table` slots.\n\n### Events\nAll events are handled automatically for this component. No extra setup is required.\n\nSee `vex-table` events. Additional events:\n\n| Event type | Default event name | Description |\n| --- | --- | --- |\n| `open` | `openDBChannel` | Dispatched to open a two way sync with a collection. Automatically fired on created(). |\n| `close` | `closeDBChannel` | Dispatched to close a two way sync with a collection. Automatically fired on destroyed(). |\n\n\n# Mixins\n\n## Vuetify Form Mixin (vec-form-mixin)\n`vec-form-mixin` is a mixin that simplifies the creation of `vec-table` forms.\nThe mixin provides the following functionality:\n\n- `item` property, to receive the given object. Read only.\n- `editableItem` component data. This is what your form should modify.\n- `exit` method. Closes the form without saving.\n- `createAndExit` method. Closes the form after saving a new item (based of `editableItem`).\n- `updateAndExit` method. Closes the form after updating an existing item (based of `editableItem`).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmigone%2Fvuetify-easy-crud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftmigone%2Fvuetify-easy-crud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmigone%2Fvuetify-easy-crud/lists"}