Vue History Mode Routing: Everything You Need to Know

Vue Router Example

Vue History Mode Routing The default mode for the vue-router is hash(#) mode, as it uses the URL hash to simulate a full URL so that the page won’t be reloaded when the URL changes. To get rid of the hash mode, we can use the router’s history mode, which leverages the history.pushState API to achieve URL navigation without a page reload. … Read more

Nuxt js Laravel Authentication: Everything You Need to Know

Nuxt Laravel Authentication Example

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

Vue Datatable Component: The Complete Guide

Vue Datatable Example For Client side and Server side

For this demo, I am using a vue-tables-2 library.  To send a network request and fetch the data from the server, I am using Axios promise-based library. You can find more on Github. Finally, I will show you client-side datatable implementation. For the server-side implementation of the datatables, you need to have a ready API to … Read more

How To Create A Global Event Bus With Vue.js

Global EventBus in Vue

An event bus is a pub/subpattern. Means one component publishes an event and another component subscribes to that event. So one component Vue component emits an event with some data, and another component subscribes to that event and receives that data.  It is a quick way to passing the data from parent to child or … Read more

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

Vuex axios tutorial

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

Custom Vue Pagination Tutorial with example

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 Firebase CRUD Example: Step by Step Guide

If you are new to both Vue and Firebase, then you can check out my other tutorial Vue Firebase Tutorial. It will help you to up and running with Vue and Firebase and how we can connect. Now, let us straight to the point and get started. Vue Firebase CRUD Example Our complete app looks … Read more

Vue Router Loading Indicator: The Practical Guide

vue router progress bar example

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

How To Setup Vue js With Webpack 4 Example From Scratch

How To Setup Vue js With Webpack 4 Example From Scratch

Webpack 4 is out now, and it has some functional changes in this version, like zero configuration as parceljs come up with that first. If you are new to webpack 4, you can check out my  Webpack 4 Tutorial With Example. First, we will see how we will install the necessary dependencies and then configure the … Read more

How to Do Testing in Vue.js

Vue js Testing Tutorial With Example From Scratch

If you are making small web applications, it is easy to test them. But when it becomes larger and larger, it becomes tedious to test minor components of the applications. In that scenario, We need to use automated testing that checks every time we change the code to ensure that our code does not break … Read more

Vue Axios Example: The Complete Guide Step by Step

Vue js Axios Tutorial

Axios is an excellent http client library. It uses promises by default and runs on both the client and the server. Axios is an impressive HTTP client library that lets you asynchronously issue HTTP requests to interact with REST endpoints. Consume REST APIs and make HTTP Requests is easy with Axios and Vue.js. Vue Axios We will use Axios to … Read more