{"id":13937932,"url":"https://github.com/what-crud/vue-crud","last_synced_at":"2025-04-12T17:44:16.175Z","repository":{"id":34477085,"uuid":"116052359","full_name":"what-crud/vue-crud","owner":"what-crud","description":"Vue.js based REST-ful CRUD system","archived":false,"fork":false,"pushed_at":"2022-12-10T17:05:35.000Z","size":11982,"stargazers_count":834,"open_issues_count":42,"forks_count":238,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-04-03T19:15:57.683Z","etag":null,"topics":["boilerplate","boilerplate-application","cms","crm","crm-system","crud","crud-application","javascript","material-design","rest","single-page-app","spa","vue","vue-crud","vuejs2","vuetify","vuex","webpack"],"latest_commit_sha":null,"homepage":"https://vue-crud.github.io/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/what-crud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-02T20:04:29.000Z","updated_at":"2025-03-25T14:05:04.000Z","dependencies_parsed_at":"2023-01-15T07:30:25.406Z","dependency_job_id":null,"html_url":"https://github.com/what-crud/vue-crud","commit_stats":null,"previous_names":["szczepanmasny/vue-crud"],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/what-crud%2Fvue-crud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/what-crud%2Fvue-crud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/what-crud%2Fvue-crud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/what-crud%2Fvue-crud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/what-crud","download_url":"https://codeload.github.com/what-crud/vue-crud/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248609311,"owners_count":21132888,"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":["boilerplate","boilerplate-application","cms","crm","crm-system","crud","crud-application","javascript","material-design","rest","single-page-app","spa","vue","vue-crud","vuejs2","vuetify","vuex","webpack"],"created_at":"2024-08-07T23:04:06.964Z","updated_at":"2025-04-12T17:44:16.147Z","avatar_url":"https://github.com/what-crud.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"\u003cdiv align=\"center\" style=\"color:red;\"\u003e\n  \u003ch1\u003ethe project is not supported\u003c/h1\u003e\n  \u003ch2\u003e\n    If you want to contribute to this project please fork from this project or email me to add you to what-crud group\n  \u003c/h2\u003e\n\u003c/div\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"300\" height=\"auto\" src=\"https://user-images.githubusercontent.com/18534115/49319435-29ccf000-f4fd-11e8-9fc6-8678864132bd.png\"\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eVue CRUD\u003c/h1\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca\u003e\u003cimg alt=\"license\" src=\"https://img.shields.io/badge/license-MIT-brightgreen.svg\"\u003e\u003c/a\u003e\n  \u003ca\u003e\u003cimg alt=\"version\" src=\"https://img.shields.io/badge/version-v0.15.2-yellow.svg\"\u003e\u003c/a\u003e\n  \u003ca\u003e\u003cimg alt=\"build\" src=\"https://travis-ci.org/what-crud/vue-crud.svg?branch=master\"\u003e\u003c/a\u003e\n  \u003ca\u003e\u003cimg alt=\"PRs\" src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\"\u003e\u003c/a\u003e\n  \u003ca\u003e\u003cimg alt=\"Gitpod Ready-to-Code\" src=\"https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003ch4 align=\"center\"\u003eVue.js based REST-ful CRUD system.\u003c/h4\u003e\n\n* Vue CRUD allows to create both a mechanism for managing a single table, as well as a CMS or extended CRM with a login system and modules\n* Application built with Vue CRUD is SPA (Single Page Application) so it works much faster than apps based on Wordpress, Joomla, etc.\n* Vue CRUD uses the vue along with its ecosystem (Vuex, Vuetify, etc). Enjoy the benefits of the most popular JS framework in the world.\n* The application architecture is adapted to work with REST API\n\n![Vue CRUD demo](https://user-images.githubusercontent.com/18534115/55162114-646f2e00-5167-11e9-8948-c4fc964daa28.gif)\n\n## Functions\nVue CRUD provides a set of utilities, from which you can compose your own application. Features included in the system can communicate with each other thanks to the use of the Vuex library. Vue CRUD includes the following elements:\n\n- **CRUD** | \u003ca href=\"http://vue-crud-demo.id-a.pl/#/crud\" target=\"_blank\"\u003eDEMO / SANDBOX\u003c/a\u003e:\n  - operations on records:\n    - Store,\n    - Update,\n    - Suspend/Restore,\n    - Delete,\n    - Multiple update,\n    - Multiple Suspend/Restore,\n    - Multiple Delete\n  - filtering:\n    - Show active/inactive records,\n    - Search phrase in whole table,\n    - Search phrase in selected column (exact, like and list mode)\n  - items view versions:\n    - client side (small tables),\n    - server side (big tables)\n  - items view types:\n    - table,\n    - **NEW!** tree\n  - other functions and features:\n    - datatable mechanism allows selection of the number of records per page, page transition and sorting,\n    - management of a child table from the parent table module,\n    - export to excel (xlsx),\n    - table refreshing,\n- **Authentication system** | \u003ca href=\"http://vue-crud-demo.id-a.pl/#/login\" target=\"_blank\"\u003eDEMO / SANDBOX\u003c/a\u003e:\n  - login form (built-in communication with API, validation),\n  - optional locale selection,\n  - redirecting to the app,\n- **App layout components** | \u003ca href=\"http://vue-crud-demo.id-a.pl/#/app\" target=\"_blank\"\u003eDEMO / SANDBOX\u003c/a\u003e:\n  - Toolbar (with optional elements):\n    - title,\n    - logo,\n    - user profile,\n    - locale selection,\n    - logout,\n    - slots for developer\n  - Sidebar:\n    - List of routes,\n    - Slot for title or user avatar,\n    - Slot for developer,\n    - Customizable sidebar behaviour\n  - Alerts system,\n  - Footer,\n  - ... and others\n\nThe record creation / editing form supports the following types of fields:\n\n* Input,\n* Number,\n* Decimal\n* Textarea,\n* Rich Text Box,\n* Select (hardcoded list or obtained from API),\n* Datepicker,\n* Timepicker,\n* Checkbox,\n* Files,\n* **NEW!** Dynamic (user can select field type separately for each record),\n* **NEW!** Custom (with slots)\n\n## Support for mobile devices\n\n### App layout on desktop...\n \u003cimg\n  width=\"auto\"\n  height=\"400\"\n  src=\"https://user-images.githubusercontent.com/18534115/68077595-9fed6d00-fdc6-11e9-9e52-37dad9bb4bc1.png\"\n  alt=\"app layout on desktop\"\n/\u003e\n\n### ... and on mobile device\n \u003cimg\n  width=\"auto\"\n  height=\"400\"\n  src=\"https://user-images.githubusercontent.com/18534115/68077552-3ff6c680-fdc6-11e9-9b8c-3e92dce596c5.png\"\n  alt=\"app layout on mobile device\"\n/\u003e\n\n\n## Demo versions\n\n#### \u003ca href=\"http://vue-crud-demo.id-a.pl\" target=\"_blank\"\u003eDEMO / SANDBOX\u003c/a\u003e\n\n#### \u003ca href=\"http://vue-crud-crm.id-a.pl\" target=\"_blank\"\u003eCRM DEMO\u003c/a\u003e\nCredentials with limited privileges (readonly):\\\nLogin:  guest@vue-crud.com\\\nPass:   ajSGenC0\\\nTo get full user account, contact me on my \u003ca href=\"http://id-a.pl\" target=\"_blank\"\u003ecompany site\u003c/a\u003e.\n\n## Quick start\n\nDo you want to test the application quickly, and you do not have an API ready? No problem, you can use the ready-made example in the **examples** folder. The API for this example is available on the internet, so you can connect to it by entering its address in the configuration file.\n\n### Steps\n\n1. Clone Vue CRUD:\n``` console\ngit clone git@github.com:what-crud/vue-crud.git\n```\n2. Type following commands:\n``` console\nyarn\n:: or\nnpm install\n```\n3. Choose one of the following templates:\n- `empty`,\n- `simple-crud`,\n- `sandbox`,\n- `crm`,\n- `cms`\n\n...and type e.g.:\n``` console\nyarn load-template simple-crud\n:: or\nnpm run load-template simple-crud\n```\n4. If you have your own API prepared, modify **src/config/api.js** file.\n\n5. Serve your app:\n``` console\nyarn serve\n:: or\nnpm run serve\n```\n6. Your app is already running (probably at http://localhost:8080).\n\n### Usage\n\nThe simplest possible code that supports CRUD operations for one table will look something like this:\n``` html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ccrud\n      :prefix=\"prefix\"\n      :path=\"path\"\n      :page-title=\"pageTitle\"\n      :fields-info=\"fieldsInfo\"\n      :details-title=\"$t('detailsTitle')\"\n    \u003e\n    \u003c/crud\u003e\n    \u003calert-box\u003e\u003c/alert-box\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Crud from '@/utils/crud/components/Crud.vue'\n  import AlertBox from \"@/utils/app/components/AlertBox.vue\";\n  export default {\n    data() {\n      return {\n        prefix: 'demo',\n        path: 'tasks',\n        pageTitle: 'demo.tasks',\n      }\n    },\n    computed: {\n      fieldsInfo() {\n        return [{\n            text: this.$t('fields.id'),\n            name: 'id',\n            details: false,\n          },\n          {\n            type: 'input',\n            column: 'name',\n            text: this.$t('fields.name'),\n            name: 'name',\n            multiedit: false\n          },\n          {\n            type: 'input',\n            column: 'description',\n            text: this.$t('fields.description'),\n            name: 'description',\n            required: false\n          },\n        ]\n      },\n    },\n    components: {\n      Crud,\n      AlertBox,\n    },\n    i18n: {\n      messages: {\n        en: {\n          detailsTitle: 'Task',\n          fields: {\n            id: 'Id',\n            name: 'Name',\n            description: 'Description'\n          }\n        }\n      }\n    },\n  }\n\u003c/script\u003e\n```\n\n## API\nThe application requires a connection with the appropriate API. API can be created in any technology - the condition is its compliance with the Vue CRUD communication specification. If you need to create your API and do not know how to get started, and you don't mind PHP and Laravel, download or clone the \u003ca href=\"https://github.com/oh-crud/laravel-crud-api\" target=\"_blank\"\u003eLaravel CRUD API\u003c/a\u003e project.\n\n## Documentation\nTo check out docs, visit :\n#### \u003ca href=\"https://vue-crud.github.io/\" target=\"_blank\"\u003evue-crud.github.io\u003c/a\u003e.\n\n## Contributing\nIf you have an idea about improving Vue CRUD, do not hesitate.\n\nDevelopers interested in contributing should read the [Code of Conduct](./CODE_OF_CONDUCT.md).\n\n## License\n[MIT](https://opensource.org/licenses/MIT)\n\nCopyright (c) 2018-present, Szczepan Masny\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhat-crud%2Fvue-crud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhat-crud%2Fvue-crud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhat-crud%2Fvue-crud/lists"}