MEVN Stack Tutorial: The Complete Guide Step by Step

In this tutorial, we will generate FullStack Single Page Application(SPA) using MongoDB, Express, Vue, and Node.js CRUD Example Tutorial step by step. For this example, we will not use Vuex for state management because this app will be simple and not complicated. We will create an application to create, update, read, and delete the post. … Read more

Vue Notification Tutorial: The Complete Guide

Vue.js is responsive, touch compatible, easy to use, attractive, and feature-rich with icons, actions, etc. In this demo, when we save any data in the database, we will display a notification saying that the item has been successfully saved, or if we show any error, we can show it. For the backend, we use Laravel … Read more

How to Upload a File in Vue Using vue-dropzone

I am using Vue 3.0. So first, we will install the Vue.js using Vue CLI, and then we will install the vue-dropzone library. Then configure it, and we are ready to accept the file. Vue File Upload Using vue-dropzone Dropzone.js is an open-source library providing drag-and-drop file uploads with image previews. DropzoneJS is lightweight, doesn’t … Read more

Vue Elasticsearch With Node.js: The Complete Guide

We build a frontend in Vue.js and then send a network request to the node.js server, and the node will query the data to the elastic server. Finally, it will get a response and send the JSON response back to the Vue.js client. First, we create a Vue.js frontend, then create a Node.js server and … Read more

How to Create Hover Animation in Vue.js

We use CSS3 properties to accomplish the goal. Apply animation effect on hover in Vue.js is very easy. First, we create a simple card with text and images. Then, when we hover that card, the image size will be increased but not spread out of the card. So we use the CSS transition property. Also, … Read more

Vue Laravel CRUD: How to Create Vue Laravel Application

Vue Laravel CRUD is vital for learning laravel and vue from scratch. CRUD (Create, Read, Update, and Delete) are the primary data operations and one of the first things you learn as a Laravel developer. We will learn how to build a small web application that creates, reads, updates, and deletes MySQL database. In addition, … Read more

Vue Router Example: How to Use Routing in Vue.js

Vue is already an excellent Javascript library that allows you to create dynamic front-end applications. Vue.js is also great for single-page applications (SPA).  Vue Router is the official router for Vue.js. It profoundly integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include: Nested route/view mapping. It is a modular, … Read more

Nuxt js Laravel Authentication: Everything You Need to Know

Nuxt.js is a free and open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js. Nuxt is based on a powerful modular architecture. With Nuxt.js, your application will be optimized out of the box. Let’s see how to use … Read more

Vuex Axios: How to Send Vuex Axios GET Request in Vue

Using Vuex axios get request, we will see how we can dispatch an action to get the data from the server and then update the state of our application and display that data into the Vue component. I use Vue 3, Vuex for state management, and Axios for the client-side network request library to send … Read more

Vue Pagination Tutorial: Everything You Need to Know

In this example, we will install some fake data using faker library and then use client-side http network request promise-based library Axios to send a request to Laravel server, fetch and display the data in the form of Pagination. Finally, we will build pagination in Vue from scratch. Final Output Vue Pagination Tutorial We are using … Read more

Vue Router Loading Indicator: The Practical Guide

In this tutorial, I will show you how to add a vue router loading indicator while browsing the different pages in the Vue application. Vue Router Loading Indicator When we navigate from one page to another page, then we need to show some progress bar at the top of our application. That indicates to our users … Read more