VueJS Crud

Total lessons: 13

VueJS CRUD: Product Search

With a product list on the page it will be a good idea to be able to search through the products by product name so that you can find the right product to edit or delete. In the tutorial we're going t...

VueJS CRUD: Form Notifications

The notification component will be used to display an alert to the user either success or error. This component requires data to be passed into it via props, this allows us to get the notification da...

VueJS CRUD: Delete Product Page

The Delete Product Page is a confirmation page used to delete the product from the database. It will simply consist of a button to submit the form, on submitting the form we then make a API DELETE me...

VueJS CRUD: Edit Product Page

The Edit Product Page will be used to allow a user to edit a specific product. This needs to work off a URL like /product/edit/:id with :id being the product ID in the database. This component needs...

VueJS CRUD: Create Product Page

The Create Product Page will display a form allowing us to fill out new product data and POST this to the API to store the product data in the JSON file. This component needs two data points, one to...

VueJS CRUD: All Products Page

The first page we're going to create is the All Products page this in very simple at the moment and will display all the products located in the products data JSON file. This page will be accessed at...

VueJS CRUD: Instantiate Application

The main.js is the import file for webpack so this is the file that we need to bootstrap the application from. First we need to import Vue which is simply done by using import Vue from 'vue' This is...

VueJS CRUD: Single HTML Page

This CRUD application will run off a single HTML page, this takes advantage of the VueJS router functionality, by allowing us to replace the components in view by switching out the contents of the rou...

VueJS CRUD: Create a Node.js API Using Express

For this project we're going to build an API from Node.js to process the products we can use in the CRUD application. Normally I would use an API using something like Laravel but this is a demo to sho...

VueJS CRUD: Install Webpack

What Is Webpack? The image above sums up Webpack perfectly, it takes your project modules like Javascript, CSS, images and bundles them up into static files for the browser to use. This allows you to...

VueJS CRUD: NPM To Load Dependencies

What Is NPM? NPM is the Node Package Manager that is used to install, publish and manage your node programs. If you're coming from a PHP background then you can think of this as similar to composer. N...

VueJS CRUD: Setup Application

To start off this project we first need to create and setup the structure of our files. At the root of the project we have index.html package.json README.md server.js webpack.config.js The index.ht...

CRUD Application With VueJS

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