Vue.js Developers
Published in

Vue.js Developers

7 Vue Patterns That You Should Be Using More Often

Let’s be honest, reading documentation is not something that most of us enjoy, but when working with a modern front-end framework like Vue, which is constantly evolving, a lot of things change with every new release and you might have missed some of the new and shiny features that were later introduced. Let's take a look at those interesting but not so popular features. Keep in mind that all of these are part of the Official Vue documentation.

1. Handling Loading State

In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it’s needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component needs to be rendered and will cache the result for future re-renders. What’s new as of version 2.3 is that the async component factory can also return an object of the following format:

With this approach, you have the additional options of loading and error states, delay in component fetching, and timeout.

2. Cheap Static Components with “v-once”

Rendering plain HTML elements is very fast in Vue, but sometimes you might have a component that contains a lot of static content. In these cases, you can ensure that it’s only evaluated once and then cached by adding the v-once directive to the root element, like this:

3. Recursive Components

Components can recursively invoke themselves in their own template. However, they can only do so with the name option.

If you’re not careful, recursive components can also lead to infinite loops:

A component like the above will result in a “max stack size exceeded” error, so make sure recursive invocation is conditional (i.e. uses a v-if that will eventually be false).

4. Inline Templates

When the special attribute inline-template is present on a child component, the component will use its inner content as its template, rather than treating it as distributed content. This allows more flexible template-authoring.

As /u/JZumun pointed out on Reddit. Inline templates are one of Vue 3 deprecated features and you shouldn’t really start using them. Using a script tag or a default slot are the alternatives.

5. Dynamic Directive Arguments

Directive arguments can be dynamic. For example, in v-mydirective:[argument]="value", the argument can be updated based on data properties in our component instance! This makes our custom directives flexible for use throughout our application.

Here’s a directive where a dynamic argument can be updated per component instance:

6. Event & Key Modifiers

For the .passive, .capture and .once event modifiers, Vue offers prefixes that can be used with on:

For example:

For all other event and key modifiers, no proprietary prefix is necessary, because you can use event methods in the handler:

7. Dependency Injection (Provide/Inject)

There are several ways to make two components communicate in Vue with advantages and disadvantages in all of them. A new way introduced in version 2.2 is using Dependency injection with Provide/Inject.

This pair of options are used together to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain. If you are familiar with React, this is very similar to React’s context feature.

Conclusion

Keeping up to date is hard and takes time. Your best bet is to monitor Vue’s Twitter account, the official release announcements, and Medium’s Vue publications. In addition Vue 3 is here with a lot of new features that you might want to get familiar with, before migrating. Feel free to reply if you learned something or with your favorite feature.

Video Update

Are you more of a visual learner? Lachlan Miller converted this article into a video with hands-on examples using Vue 3. Feel free to watch it and don’t forget to subscribe to his youtube channel for more quality content like this.

--

--

--

Helping web professionals up their skill and knowledge of Vue.js

Recommended from Medium

How Does Node.JS work?

Hashnode API — How To Display Your Blog Articles On Your Portfolio Page

A photo of a laptop with code on

What is Node JS??? Building Blocks & Architecture???

Easiest way to deploy your Express.js

Inform Front-End From .NET Core API Using SignalR

Web browser ad-block extension issue

The Lost Art of the Makefile

How To Log Like A Boss With Node.js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Fotis Adamakis

Fotis Adamakis

Front End Engineer @ Glovo // Vue.js Athens Meetup Coorganizer

More from Medium

How to Use Color in Vuetify

Hot reload does not work in Vue CLI

Vue 3 — Google reCaptcha implemented in just 2 minutes.

Nuxt.js | How to retain Scroll Position when returning to page without Navigation History