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.
