Read the following detailed article to get started, I will be making changes to instructions there based on feedback as I do not want to keep pushing documentation changes to github and npm.
A VueJS CRUD component which is customisable and extensible to suit more complex situations such as Nested CRUD, custom filters, use of GraphQL or REST to access various datastores. Vuetify is used for layout components but can be changed to alternatives such as ElementUI (by changing components from Vuetify to ElementUI)
- Able to do nested Crud
- Allow you to configure how to write the CRUD calls
- find, findOne, update, edit, delete
- if you set update, edit or delete custom functions that you write to null, it will not allow such operations
- Allow you to use any datastore(s) conection
- example uses firebase, but you can adapt it to use others such
- direct connection to store MySQL, Redis, postgres, mongodb, etc.
- rest API
- graphQL
- you can even write to connect a mixture of multiple connections in a crud call
- example uses firebase, but you can adapt it to use others such
- Allow you to write how the CRUD Form will look like
- Allow you to write how the CRUD Filter will look like
- You can replace Vuetify with something else like ElementUI
Because of its flexible nature, quite a number of things need to be coded to fit your needs.
However, the good part is that these parts need to be coded anyway and once you find your way around the design, you will be able to quickly create custom CRUD in many of your use cases
git clone https://github.com/ais-one/vue-crud-x.git
cd vue-crud-x
npm install
npm run build
npm pack
# A local npm package will be created (a tgz file)
cd example
# install dependencies in package.json
# delete package-lock.json if you face problems
npm install
# install the local npm package packed earlier... (but do not install into package json)
npm install --no-save ../vue-crud-x-?.?.?.tgz
# ?.?.? is the version
touch cfg.json
vi cfg.json
{
"firebaseCfg": {
"apiKey": "",
"authDomain": "",
"databaseURL": "",
"projectId": "",
"storageBucket": "",
"messagingSenderId": ""
},
"recaptchaSiteKey": ""
}
npm run dev
npm init
From NPM repo
npm install --save vue-crud-x
npm install --save regenerator-runtime
or
From local package file
npm i --save /path-to/vue-crud-x-?.?.?.tgz
npm install --save regenerator-runtime
# go to the example folder (built using vue-cli 3)
cd node_modules/vue-crud-x/example
npm install
# configure the cfg.json file & run
npm run serve
Important! Please Refer to the Getting Started Article For Details: https://medium.com/@aaronjxz/vue-crud-x-a-highly-customisable-crud-component-using-vuejs-and-vuetify-2b1539ce2054
- Include Vuetify i18n, allow translations in the JS files
- Pagination in example (with firebase)
- Take note of the following github issues
- Fixed Table Header:
- Infinite Scroll: vuetifyjs/vuetify#3538
- add casl-vue, for casl authorization library
- Google Map and CRUD combined component (can also be layout for other use cases such as chart mixed with CRUD)
- Configurble theme
- Check if it is possible to make compatible with NuxtJS (route-link, to, nuxt-link)
- No need vuelidate or vee-validate, use validation availble in Vuetify - see if it is possible to make common validation rules
- Look into abort/timeout for async operations without abort/timeout feature
See RELEASE.MD file