Vue CRUD

Vue.js based REST-ful CRUD system.

• 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
• Application built with Vue CRUD is SPA (Single Page Application) so it works much faster than apps based on Wordpress, Joomla, etc.
• Vue CRUD uses the vue along with its ecosystem (Vuex, Vuetify, etc). Enjoy the benefits of the most popular JS framework in the world.
• The application architecture is adapted to work with REST API

Documentation

To check out docs, visit :

vue-crud.github.io.

Demo version

Simple CRUD demo

CRM demo

Credentials with limited privileges (readonly):
Login: guest@vue.crud
Pass: ajSGenC0
To get full user account, contact me on my company site.

Functions

Vue CRUD provides a set of utitlities, 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:

• CRUD,
• Authentication system:
  • login form (built-in communitation with API, validation),
  • optional locale selection,
  • redirecting to the app,
• App layuout components:
  • Toolbar (with optional elements):
    • title,
    • logo,
    • user profile,
    • locale selection,
    • logout,
    • slots for developer
  • Sidebar:
    • List of routes,
    • Slot for title or user avatar,
    • Slot for developer,
    • Customizable sidebar behaviour
  • Alerts system,
  • Footer,
  • ... and others

The CRUD is a mechanism for managing the database tables. Included CRUD system allows the following operations:

• Store,
• Update,
• Suspend/Restore,
• Delete,
• Multiple update,
• Multiple Suspend/Restore,
• Multiple Delete

The record creation / editing form supports the following types of fields:

• Input,
• Number,
• Decimal
• Textarea,
• Rich Text Box,
• Select (list from related table),
• Datepicker,
• Timepicker,
• Checkbox,
• Files

Datatable is available in 2 versions:

• Client side (small tables < 2000 records)
• Server side (> 2000 records)

Each version has its own filtering system:

• Show active/inactive records,
• Search phrase in whole table,
• Search phrase in selected column (exact, like and list mode)

Another functions and features:

• datatable mechanism allows selection of the number of records per page, page transition and sorting,
• management of a child table from the parent table module,
• language versions,
• simple configuration of themes,

Quick start

Do you want to test the application quickly, and you do not have a ready API? 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.

Steps

• Select template from examples folder you want to use, e.g. examples/simple-crud. Then:
• Copy examples/simple-crud/public folder to the root directory,
• Copy the rest of files and folders (config, locales, routes, main.js, router.js) from examples/simple-crud folder to the src directory,
• If you have your own API prepared, modify src/config/api.js file,
• Type following commands:

yarn
:: or
npm install

and then:

yarn serve
:: or
npm run serve

... and your app is already running (probably at http://localhost:8080).

API

The 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 Vue CRUD Laravel API project.

Contributing

If you have an idea about improving Vue CRUD, do not hesitate.

Developers interested in contributing should read the Code of Conduct.

License

MIT

Copyright (c) 2018-present, Szczepan Masny