Code Monkey home page Code Monkey logo

vue-crud-x's Introduction

npm version npm

IMPORTANT: Getting Started - Article

Read the following detailed article (usage and explanations in the article are also updated as and when required)

What Is vue-crud-x

A VueJS CRUD component which is customisable and extensible to suit more complex situations such as Nested CRUD, custom filters, forms, 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)

Examples To Get You Up And Running

See the respective README.md files for more information on starting

Differentiating Features From Other CRUD Components

  • Able to do nested CRUD operations, e.g. selecting a post from a list of posts, and then selecting a comment from a list of comments of the selected post to edit
  • Edit inline
  • Pagination, Use as component in a page
  • Include handling of authentication tokens, and any other information
  • Customise
    • Table data format for each cell (e.g., currency to 3 decimal places)
    • Search filters
    • CRUD Form layout & validation (can also be automated)
    • CRUD operations (e.g. disallow delete)
  • (Optional) Auto-configure Search filters, CRUD Forms using JSON data
  • For CRUD operations, you can Use direct call (e.g. Firestore), or API (REST, GraphQL) to one or more types of datastore (MySQL, MongoDB, Redis, ElasticSearch, etc.)
  • Export to CSV, File/Image Upload, i18n
  • (New) Permissions
  • Possibly replace Vuetify with something else like ElementUI, Buefy, etc.

What is bad about this CRUD Component

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


Todo / KIV

  • Take note of the following github issues
  • Not Urgent: delete related records (e.g. deleting a party will also delete all notes belonging to that party)
  • Not Urgent: v-data-table actions-append: implement later, requires vuetifyjs 1.2.X
  • 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

Notes

None at the moment

Changes

See RELEASE.MD file

vue-crud-x's People

Contributors

ais-one avatar

Watchers

James Cloos avatar athiwatp avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.