Skip to content
Vue.js based REST-ful CRUD system
Branch: master
Clone or download
Latest commit 4e35948 Apr 17, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples crm example Apr 3, 2019
src
tests/unit #21 - ESLint added, code cleaned Mar 27, 2019
.editorconfig
.eslintrc.js
.gitignore
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Dec 25, 2018
LICENSE Create LICENSE Dec 2, 2018
README.md
babel.config.js
jest.config.js
package.json
template-loader.js
vue.config.js
yarn.lock

README.md

Vue CRUD

price license version PRs

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

Vue CRUD demo

Functions

Vue 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:

  • CRUD | DEMO / SANDBOX:
    • operations on records:
      • Store,
      • Update,
      • Suspend/Restore,
      • Delete,
      • Multiple update,
      • Multiple Suspend/Restore,
      • Multiple Delete
    • filtering:
      • Show active/inactive records,
      • Search phrase in whole table,
      • Search phrase in selected column (exact, like and list mode)
    • versions:
      • client side (small tables < 2000 records)
      • cerver side (> 2000 records)
    • other 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,
      • export to excel (xlsx),
      • table refreshing,
  • Authentication system | DEMO / SANDBOX:
    • login form (built-in communication with API, validation),
    • optional locale selection,
    • redirecting to the app,
  • App layout components | DEMO / SANDBOX:
    • 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 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

Demo versions

DEMO / SANDBOX

CRM DEMO

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

Quick start

Do 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.

Steps

  1. Clone Vue CRUD:
git clone git@github.com:szczepanmasny/vue-crud.git
  1. Type following commands:
yarn
:: or
npm install
  1. Choose one of the following templates:
  • empty,
  • simple-crud,
  • crm

...and type e.g.:

yarn load-template simple-crud
:: or
npm run load-template simple-crud
  1. If you have your own API prepared, modify src/config/api.js file.

  2. Serve your app:

yarn serve
:: or
npm run serve
  1. Your app is already running (probably at http://localhost:8080).

Usage

The simplest possible code that supports CRUD operations for one table will look something like this:

<template>
  <div>
    <crud :prefix="prefix" :path="path" :pageTitle="pageTitle" :fieldsInfo="fieldsInfo" :detailsTitle="$t('detailsTitle')">
    </crud>
    <alert-box></alert-box>
  </div>
</template>

<script>
  import Crud from '@/utils/crud/components/Crud.vue'
  import AlertBox from "@/utils/app/components/AlertBox.vue";
  export default {
    data() {
      return {
        prefix: 'demo',
        path: 'tasks',
        pageTitle: 'demo.tasks',
      }
    },
    computed: {
      fieldsInfo() {
        return [{
            text: this.$t('fields.id'),
            name: 'id',
            details: false,
          },
          {
            type: 'input',
            column: 'name',
            text: this.$t('fields.name'),
            name: 'name',
            multiedit: false
          },
          {
            type: 'input',
            column: 'description',
            text: this.$t('fields.description'),
            name: 'description',
            required: false
          },
        ]
      },
    },
    components: {
      Crud,
      AlertBox,
    },
    i18n: {
      messages: {
        en: {
          detailsTitle: 'Task',
          fields: {
            id: 'Id',
            name: 'Name',
            description: 'Description'
          }
        }
      }
    },
  }
</script>

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

Documentation

To check out docs, visit :

vue-crud.github.io.

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

You can’t perform that action at this time.