7 Vue Patterns That You Should Be Using More Often

Fotis Adamakis
Jan 30 · 4 min read
Image for post
Image for post

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:

Image for post
Image for post

For example:

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

Image for post
Image for post

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.

Vue.js Developers

Helping web professionals up their skill and knowledge of…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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