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.
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.
Rendering performance is a vital metric for frontend developers. For every second your page takes to render, the bounce rate increases.
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.
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.
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.
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.
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.
The Single File Component Styles RFC gives us Vue developers a way to use a component’s reactive data as CSS variables.
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?
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.
Axios is one of the most popular HTTP request libraries for JavaScript, and it’s commonly used to call APIs inside of Vue apps.
In this article, we’re going to be taking a look at how to Vue 3 Desktop Project from a Vite app.
In Vue, there are two ways to conditionally render parts of your app: v-ifand v-show.
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.
Any project that is going to be used by fellow developers is going to need some amazing documentation.
How to use v-model for two-way data binding between two components.
Adding the right VS Code Extensions to Visual Studio can make your life as a developer so much easier.
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.
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.
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.
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.
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.
Props are an essential part of any modern JavaScript framework.
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).
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 parallax scrolling effect is a beautiful way to add depth to your designs and to really make your site stand out.
Recently, I was working on a navigation menu, when I realized that I wanted a clean way to highlight the current page.
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.
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.
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…
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 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).
With the release of Vue 3 coming soon, many people are wondering “What’s different in Vue 2 vs. Vue 3?”
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.
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.
Wrapper components are insanely useful for making your codebase more organized and more professional.
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.
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!
Adding drag and drop functionality is a great way to make your Vue apps feel more natural and user friendly.
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.
With Vue 3 Alpha out, many developers are trying out the new changes – the biggest one being the Composition API.
As Vue continues to become more and more widespread, there are several best practices emerging and becoming standard.
In Vue, directives are one of the best ways to directly edit the DOM.
As VueJS grows in popularity, community-created VueJS plugins are becoming more common and more powerful.
Most VueJS developers are extremely familiar with computed properties. They’re a great way to design more readable code and declutter your template.
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.
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.
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.
Slots are another way in Vue for a component to inject content into a child component. This does this using template code.
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.
Create reusable functionality in Vue 2 with Vue mixins.