Articles

Learn Vue through example packed articles

The Beginners Guide to Template Refs

Vue Template Refs give our JavaScript code a reference to easily access the template. For example, if we needed\nquick access to a component or HTML element, template refs is the perfect solution.

Why You Need This Library for Vuex in Vue 3

Vuex is a state-management system following the Flux pattern. It lets us create a global store and a unidirectional data flow across our Vue 3 app.

Improve Vue Performance with v-once + v-memo

Rendering performance is a vital metric for frontend developers. For every second your page takes to render, the bounce rate increases.

5 VueUse Library Functions That Can Speed Up Development

VueUse is an open-source project by Anthony Fu that provides Vue developers with a huge collection of essential Composition API utility functions for both Vue 2 and Vue 3.

Lazy Load Components in Vue with defineAsyncComponent

Using Vue 3’s defineAsyncComponent feature lets us lazy load components. This means that they’re only loaded from the server when they’re needed.

Building Your Own Vue 3 Plugin - A Full Guide

Plugins are a great way to add reusable functionality to your Vue apps. With tons of existing plugins for components, routing, and more, the ecosystem for Vue has solutions for many common use cases.

A Vue Firebase Authentication Tutorial - Vue 3 and Firebase

Allowing users to create their own profiles is a common use case for many modern web apps. Trying to set this up on your own custom database can a little tricky – dealing with persistence, O-Auth, and encryption.

Explaining the Vue Context Argument - A Composition API Tutorial

When working in the Vue 3 Composition API, there are brand new ways to access component functionality. In this article, we’ll be taking a look at the setup function’s context argument.

How to Use Vue CSS Variables - Reactive Styles RFC

The Single File Component Styles RFC gives us Vue developers a way to use a component’s reactive data as CSS variables.

A Guide to Vue $emit - How to Emit Custom Events in Vue

Many Vue patterns involve passing data from a parent component to its children using props. But what if we need a child to affect its parent?

Explaining The New script setup Type in Vue 3 - RFC Takeaways

If you’ve been working in Vite and Vue 3 recently, you’ll notice that when you start a new project, your script section looks like this with this script syntax in your Vue components.

Get Kanye West Quotes w/ Vue and Axios - Beginner’s Guide to APIs

Axios is one of the most popular HTTP request libraries for JavaScript, and it’s commonly used to call APIs inside of Vue apps.

Building a Vue 3 Desktop App with Vite and Electron

In this article, we’re going to be taking a look at how to Vue 3 Desktop Project from a Vite app.

v-if vs. v-show - Vue Conditional Rendering

In Vue, there are two ways to conditionally render parts of your app: v-ifand v-show.

4 Awesome Examples of Vue Router Transitions

Vue Router transitions are a quick and easy way to add some flair to Vue app. They allow you to add smooth animations/transitions between different pages of your app.

Write Beautiful Documentation Quickly with VitePress

Any project that is going to be used by fellow developers is going to need some amazing documentation.

What you should know about Vue v-model

How to use v-model for two-way data binding between two components.

The Best VS Code Extensions For Vue Developers

Adding the right VS Code Extensions to Visual Studio can make your life as a developer so much easier.

Creating Your First Vue 3 Project - A Vue Tutorial

Vue 3 is officially here! In this announcement by Evan You, he announces the biggest changes in the new framework and talks about the amazing work the whole Vue team has done.

A Complete Guide to Vue Lifecycle Hooks - with Vue 3 Updates

Lifecycle hooks in both Vue 2 and Vue 3 work very similarly – we still have access to the same hooks and we still want to use them for the same use cases.

An Introduction to Vue Teleport - A New Feature in Vue 3

One of the new features of Vue 3 that has been talked about for a while is the idea of Portals – or ways to move template HTML to different parts of the DOM. Portals, which are a common feature in React, were available in Vue2 under the portal-vuelibrary.

How To Deploy Your Vue App to GitHub Pages

GitHub Pages is a great free option to deploy your Vue application. It’s a static site hosting service that takes files straight from a repository on GitHub.

A Quick Vue 3 Infinite Scrolling Component

If you’ve ever caught yourself on social media for way too long, chances are the site you were on was using an infinite scrolling component.

An Introduction to Vue Props

Props are an essential part of any modern JavaScript framework.

How to Register a Vue 3 Global Component

With the new versions of Vue 3 out now, it’s useful to start learning how the new updates will change the way we write code. One example is the changes in the way we write our index.js file (the file that handles creating our Vue app).

Vue Skeleton Loading Screen using Suspense Components

Skeleton loading screens show an outline of your content while waiting for it to load. It provides a better user experience and makes content feel faster than traditional loading spinners.

A Beautiful Parallax Scrolling Effect in Vue

A parallax scrolling effect is a beautiful way to add depth to your designs and to really make your site stand out.

Animated Active Menu Highlights in VueJS

Recently, I was working on a navigation menu, when I realized that I wanted a clean way to highlight the current page.

How to use Vue Watch and Vue watchEffect

Throughout the course of developing a Vue app, you’ll have tons of reactive data properties. Your app will track input fields, data calculations, and a bunch of other properties and may need to perform an action when a value updates.

Building a Vue DatePicker Component - A Vue 3 Tutorial

Well designed inputs are a great way to boostthe conversion rate of your forms. They can make your site appear more professional, trustworthy, and will allow visitors to complete forms quicker.

Extract and Reuse Logic in the Vue Composition API

The Vue 3 Composition API allows for better code organization in large projects. However, with the switch from using several different options properties to a singular setup method, a question that a lot of developers have is…

Free Vue Icon Libraries to Pretty Up Your Web App

Icons (when used properly) are a great way to grab a visitor’s attention and give them visual cues. With the rise of VueJS, especially with the anticipation for the release of Vue 3.0, the community has also started to develop a lot more Vue Icon Libraries that are directly designed for people developing in Vue.

Vue Dependency Injection Using Provide and Inject

Vue dependency injection using provide and inject is great for building Vue plugins or avoiding prop drilling (passing props all the way down the hierarchy even if many in-between components don’t require the prop).

Building the Same Component in Vue2 vs. Vue 3

With the release of Vue 3 coming soon, many people are wondering “What’s different in Vue 2 vs. Vue 3?”

How to Write Better Vue v-for Loops

In Vue, v-for loops are something that every project will use at some point or another. They allow you to write for loops in your template code and create elements iteratively.

Understanding Vue Transitions & Animations with Examples

Vue Transitions and Animations are a great way to make your website feel more modern and to give site visitors a better user experience. Luckily for developers, Vue animations take just minutes to set up.

How and Why to Use Wrapper Components in Vue 3

Wrapper components are insanely useful for making your codebase more organized and more professional.

A Guide to Vue Event Handling - with Vue 3 Updates

Vue event handling is a necessary aspect of every Vue project. It’s used to capture user input, share data, and so many other creative ways.

A Guide To Vue 3 Form Validation - Vuelidate Tutorial

Vue Form Validation is an essential part of any form system. You need to be sure that people are submitting data that your app can work with!

How to Add Drag and Drop to Your VueJS Project

Adding drag and drop functionality is a great way to make your Vue apps feel more natural and user friendly.

An Introduction to VueJS Suspense Components

Suspense components are one of the well known features in Vue 3. They allow our app to render some fallback content while waiting for asynchronous components – letting us create a smooth user experience.

Vue 3 Composition API Tips You Should Know

With Vue 3 Alpha out, many developers are trying out the new changes – the biggest one being the Composition API.

12 VueJS Best Practices for Pro Developers

As Vue continues to become more and more widespread, there are several best practices emerging and becoming standard.

Creating Your First Vue Custom Directive - with Vue 3 Updates

In Vue, directives are one of the best ways to directly edit the DOM.

How to Make Your First VueJS Plugin

As VueJS grows in popularity, community-created VueJS plugins are becoming more common and more powerful.

How to Use VueJS Filters to Write Better Code

Most VueJS developers are extremely familiar with computed properties. They’re a great way to design more readable code and declutter your template.

An Overview of Vue Dynamic Components

Vue Dynamic Components can be an extremely convenient way to make your code both more readable and adaptable. They can simplify several conditional components (ones toggled using v-if, v-else-if, v-else) into just one line of code.

An Overview of Vue Keep-Alive

When working with dynamic components, Vue recreates new instances of components when you switch the value of the directive. While it’s useful in most cases, there are times when we want to save the state of a hidden element.

Creating Your Own Reusable Vue Tabs Component

Reusable components are super important in VueJS. It helps you save so much time and when done right, really makes your project more readable and maintainable.

A Guide to Vue Slots

Slots are another way in Vue for a component to inject content into a child component. This does this using template code.

The Guide to Vue JS Computed Properties - Updated 2021

Vue JS computed properties can be a lifesaver. There are few things more frustrating to a programmer than staring at a block of code and taking years to decipher what’s going on.

How to Manage Vue Mixins

Create reusable functionality in Vue 2 with Vue mixins.