CRUD Application With VueJS

14th November 2016 in VueJS Crud

In this series we're going to learn how to create crud pages for your application using VueJS. VueJS is gaining a lot of popularity at the moment in front-end development mainly because of how easy it is to get started. If you're coming from a PHP background then in my opinion VueJS is the best Javascript framework for you to look at.

VueJS has now been included in Laravel since version 5.3 and they recommend using this in your front-end development.

In all applications where you need to store data you'll most likely have an admin side of the project where you can handle CRUD (Create, Read, Update, Delete) operations to the database allowing you to manage the data. The way VueJS consumes data is by using APIs to GET, POST, PUT, DELETE the data. In this tutorial we're going to build a simple application for managing products using CRUD pages.

Along with starting up the VueJS application we're going to look at using Webpack to handle the building of the single file VueJS components and Javascript assets. In a normal application you would build a API connecting to a database using something like Laravel but in this example we're just going to build an API very quickly using Node.js express and a JSON file for the database.

The following are the skills we're going to learn in this series:

• Setup an application to use VueJS
• Use NPM to load in dependencies
• Install and setup Webpack for build the application
• Create a Node.js API using express building methods for:
  • Get
  • POST
  • PATCH
  • DELETE
• Store data in a JSON file
• Single HTML page application using VueJS
• Instantiate VueJS and require components for the application
• Switch between different components with Vue Router
• All products page
• Create product page
• Edit product page
• Delete product page
• Build notifications component to handle form output messages
• Add product search to all products page