Code Monkey home page Code Monkey logo

vue-crud-x's Introduction

npm version

npm

IMPORTANT: Getting Started Article

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.

https://medium.com/@aaronjxz/vue-crud-x-a-highly-customisable-crud-component-using-vuejs-and-vuetify-2b1539ce2054

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, 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)

Differentiating Features From Other CRUD Components

  • 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
  • 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

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

Build Setup For Maintaining This Repository (Github)

clone the repository and go to the repository

git clone https://github.com/ais-one/vue-crud-x.git
cd vue-crud-x

install dependencies

npm install

build for production with minification

npm run build

package vue-crud-x

npm pack
# A local npm package will be created (a tgz file)

go to example & install

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

create cfg.json file & put in your credentials

touch cfg.json
vi cfg.json

{
  "firebaseCfg": {
    "apiKey": "",
    "authDomain": "",
    "databaseURL": "",
    "projectId": "",
    "storageBucket": "",
    "messagingSenderId": ""
  },
  "recaptchaSiteKey": ""  
}

run the app

npm run dev

General Usage (using NPM)

1 Init a project

npm init

2 Install

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

3 Running Example

# 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

Todo / KIV

  • Include Vuetify i18n, allow translations in the JS files
  • Pagination in example (with firebase)
  • Take note of the following github issues
  • 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

Notes

Changes

See RELEASE.MD file

vue-crud-x's People

Contributors

ais-one avatar

Watchers

 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.