Editor’s note: This article was last updated by Ibiyemi Adewakun on 11 March 2024 to cover using Axios with the Vue 3 Composition API, as well as advanced Axios configurations and interceptors. Axios is a promise-based HTTP client library for both browsers and Node.js applications, which means it can be used in frontend JavaScript applications as well as backend Node servers. In this article, we will look at how to use Axios in a simple Vue.js application. Vue is a simple frontend JavaScript framework, so the Axios use case here will be for the browser. Prerequisites for this tutorial using A ..read more

Location-based services have revolutionized the way users interact with web applications. Whether you’re building a cutting-edge delivery tracking application, a neighborhood restaurant finder, or you just want to enhance your website with dynamic maps, integrating Google Maps into your project can provide a boost to UX. In this hands-on guide, we will explore the step-by-step process of integrating Google Maps into a Vue 3 application, from the basics to advanced features that will genuinely enhance the UX of your app. Jump ahead: Google Maps Platform: An overview Integrating Google Maps in ..read more

Design patterns are reliable solutions to common problems software developers face when building software systems. They’re not specific to any programming language or framework but serve as general tools for solving problems. In frontend development, design patterns can provide reusable solutions to recurring problems in building UIs and web apps. In this article, we will explore some popular design patterns used in Vue.js and provide clear examples to illustrate their practical applications. Jump ahead: Why use design patterns in Vue.js? Categories of design patterns Builder pattern Adapter ..read more

Single-page applications built with Vue.js often face performance challenges due to factors such as downloading and parsing large JavaScript bundles, reactive data binding, or the virtual DOM. Web workers offer an excellent solution for enhancing Vue app performance. Web workers operate independently within their threads, distinct from the browser’s main thread. This separation lets web workers maintain functionality even when the main thread is occupied, ensuring your Vue app remains responsive during resource-intensive tasks. In this article, we will explore how web workers can significantly ..read more

One crucial aspect of any frontend framework is how it creates components. Interestingly, Vue.js offers not one, but two methods for this process — the Options API and the Composition API. But is this beneficial for developers or not? Let’s find out. In this article, we’ll compare each option for component creation and discuss how to choose the best method for your needs. We will cover: Why does Vue.js provide two APIs for component creation? Comparing a Vue.js component built with the Options API vs. the Composition API Comparing Composition API and Options API reusability Choosing between t ..read more

When deploying a Vue.js app, using the right hosting service can make all the difference. Heroku had been the go-to platform for many for years, renowned for its simplicity and popularity among developers because of the features available on its free tier. In late 2022, however, Heroku eliminated its free deployment features. So today, we’ll explore the best free alternatives for deploying your Vue apps, along with step-by-step instructions on how to deploy your app on each platform. Jump ahead: Prerequisites Creating a demo ecommerce app Pushing our code to GitHub Best free services to deplo ..read more

The goal of this article is to offer React developers a quick introduction to Vue development. It’s structured as a guide, recreating common React use cases and demonstrating how they are implemented with Vue. Not every aspect is explained in detail, but corresponding React examples are provided for every Vue code snippet in this GitHub repo. Table of contents What we’ll cover About our companion React and Vue projects Tooling support Single-file components in Vue vs. JSX in React Using the Composition API A quick note on styling Vue 3 components Conditional rendering in templates with ..read more

Introduction As an experienced developer using the Vue.js framework for frontend app development, you’ll most often find the need to apply design patterns to your codebase in order to build reusable, readable, and scalable components, extend existing components, or even control their behavior to meet specific requirements. This process may involve wrapping components, extending them, or even creating proxies around them. Whether you’re aiming to enhance a component’s functionality, embed it within another component, or intervene in its communication with the rest of your application, understan ..read more

The core values of object-oriented programming include reusing properties and resources and defining relationships between different classes or components. Vue provides two systems that allow us to easily reuse and define relationships between the various components in our code: inheritance and composition. Inheritance involves creating a new class, the derived class, which is based on an existing base class. The derived class inherits the properties and methods of the base class and can also add its own properties and methods. With inheritance, we can reuse code easily and create a hierarchic ..read more

Web applications are becoming increasingly dynamic and complex, as is the development process. Long gone are the days when all you needed to whip up a static site were three core web essentials: HTML, CSS, and JavaScript. Nearly every day, modern frameworks introduce new approaches to developing dynamic web apps. Conditional rendering is a feature shared by all frameworks that has helped developers improve interactivity in their applications. In this article, we’ll explore the concept of conditional rendering, examine how Vue employs the v-if and v-show directives to conditionally render block ..read more