Vue Tutorial: Some tips and tricks to help you become a Vue master

1. Watch/Immediate

Imagine you have a news application and you have a component to display an article, and in this component, you want to fetch an article from a route like “www.news.com/article/:articleId”. Normally, you would initialize an API call in the “created” life-cycle hook to fetch article details, as so:

You also have the next and previous article functionality, which will let users go to other articles. When a user changes an article, nothing would happen, so that’s why we need a watcher to fetch data for a new article:

However, in this case, we are calling ‘fetchArticle’ method in both “created” hook and watcher — which means we can change that by adding the ‘immediate’ property to the watcher.

This will result in the handler being invoked immediately when the component is created. Be aware, though, that immediate watcher handlers will be run just after anything in the ‘created’ hook. So, if for any reason you need to fetch data before something else happens in the created hook, then you will need to call it twice and resign from the ‘immediate’ prop.

2. Reusing Component for the Same Route

In some instances, you might have a few different routes that are using the same component. However, by default, if you change between those routes, the component will not be re-rendered. This is a normal thing as Vue is reusing the already existing component for performance reasons. But, if you want the component to be re-created, you can provide a dynamic “:key” prop to the component.

3. Delimiters

Vue is using double curly brackets “{{ }}” for expressions in HTML files and templates. Unfortunately, it can collide with other engines — for example if you are using Jinja templates, which also do use double curly braces. Fortunately, Vue offers a way to change delimiters used in your templates, so you could use double brackets “[[ ]]” instead.

4. Functional Components

This is not really a tip, but something that could be super helpful to use in your projects; Usually, if you have a component that is only accepting props, rendering markup and not using anything from Vue instance like life-cycle hooks, computed properties, methods, or data model, then you can provide the “functional” option and set it to true to indicate that this component should not have Vue instance. You can also do it by providing ‘functional’ prop on the template.

The benefit of functional components is they are much cheaper to re-render than stateful components. However, be careful when you wrap stateful components with functional components, as functional components are always re-rendered and will cause stateful components to be re-rendered as well.

5. JSX

Why would you want to use JSX in your Vue project?
For starters, it makes absolutely no assumption about how your code should look or be processed — there is no defined way to write JSX; JSX also helps prevent cross-site scripting attacks because you can never inject code that is not explicitly written in your application, everything is converted to a string before being rendered.

Additionally, there is no registration of imported components, you can make use of them on the go. It couples logic and markup together, you don’t have to write markup separately from the JavaScript — and JSX offers the ability to write several components in a single file as opposed to templates where you have to write every component in separate files. JSX also gives access to the spread operator, it makes things, like passing an object as props, easier.

Overall, JSX gives you the power to do whatever you want to as it gives access to the full programmatic powers of JavaScript.

6. Dynamic directive arguments

One of the handiest features of Vue is the possibility to pass down directive arguments to a component dynamically. Imagine you have a Button-Component and want to listen to a Click-Event in some cases but to a DoubleClick-Event in other cases. That’s where those directives come in handy:

7. The custom v-model

V-model is by default what is called the syntactic sugar over @input event listeners and :value props. But you can specify a “model” property in your Vue-Component to define what event and value prop is used – neat!

8. Dynamically add CSS classes

Vue incorporates HTML and Javascript together in a really beautiful way, but we can’t forget about CSS. CSS is the thing that really makes our apps shine, and is very powerful in its own right.

A very common pattern in web apps is to add and remove classes from elements based on the state of our application. We do this to show a button is disabled, to animate elements like loading spinners and a ton of other things.

Vue gives us a lot of options in choosing how to dynamically add and remove CSS classes based on what’s going on in our application. Knowing these options give you more tools, and you’ll be able to write better code because of it.

9. Slot syntax made beautifully

For all versions above Vue 2.6, a shorthand notation for slots has been introduced that can be used for events (e. g. @click for the v-on: click event) or colon-notation for bindings (:src). If you for example had a Table-Component you can use this feature as follows:

10. ???

This one’s yours ;). Comment below one helpful tip or trick that you’ve learned about Vue that brought you closer to mastery, and together let’s commit ourselves to continue on our path of mastery/excellence through the practice of purposeful learning.