Scribd
Upload
86 views

10 Tips & Tricks To Make You A Better VueJS Developer

This document presents 10 tips and tricks for becoming a better VueJS developer. Some of the tips include using shorthand syntax for slots, dynamically binding directives like events, passing all props and events from a parent component to a child component, and customizing the default v-model syntax. The tips cover various aspects of Vue like components, directives, events and more.

Uploaded by

Jhonathan Antonio
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
86 views

10 Tips & Tricks To Make You A Better VueJS Developer

This document presents 10 tips and tricks for becoming a better VueJS developer. Some of the tips include using shorthand syntax for slots, dynamically binding directives like events, passing all props and events from a parent component to a child component, and customizing the default v-model syntax. The tips cover various aspects of Vue like components, directives, events and more.

Uploaded by

Jhonathan Antonio
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

10 Tips & Tricks to make

you a better VueJS


Developer
Introduction
I really love working with VueJS and every time I do work with a
framework I enjoy digging deep into its capabilities and features.
With this post I present you 10 cool tips and tricks you might not have
been aware of yet and try to help you become better Vue Devs.

Slot syntax made beautiful


With the rollout of Vue 2.6 a shorthand notation for slots has been
introduced that can be used like 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:

<template>
...
<my-table>
<template #row="{ item }">
/* some content here. You can freely use 'item' here */
</template>
</my-table>
...
</template>

The $on(‘hook:’)
This is a nice feature you can use if you want to define a custom event
listener or third party plugin in the created or mounted hook and
need to remove it in the beforeDestroy hook to not cause any memory
leaks. With the $on(‘hook:’) method you can use defining/removing
the event in just one lifecycle method instead of two.

mounted() {
const aThirdPartyPlugin = aThirdPartyPlugin()
this.$on('hook:beforeDestroy', () => {
aThirdPartyPlugin.destroy()
})
}

Prop Validation
You probably already know that you can validate your props to be
primitives like String, Number or even Object. But you can also make
use custom validators, for example if you want to validate against a
List of Strings:

alertType: {
validator: value => ['signup', 'login', 'logout'].includes(value)
}

Dynamic directive arguments


One of the coolest features of Vue 2.6 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:

<template>
...
<aButton @[someEvent]="handleSomeEvent()"/>
...
</template>

<script>
...
data(){
return{
...
someEvent: someCondition ? "click" : "dblclick"
}
},

methods:{
handleSomeEvent(){
// handle some event
}
}
...
</script>

And whats also really neat --> you can apply the same pattern to
dynamic HTML attributes, props and much more!

Reusing a component for the same Route


Sometimes you have different routes which share some components.
If you switch between those routes, by default, the shared component
will not re-render because Vue is reusing that component for
performance reasons. But if you would want to have those
components re-render anyway you can do so by providing a :key
prop to the Router-View-Component.

<template>
<router-view :key="$route.fullPath"></router-view>
</template>

All props from parent to child


This is a really cool feature allowing you to pass down allprops from
a parent component to a child component. This is especially handy if
you have a Wrapper-Component for another component. So instead
of passing down all props one by one you can make use of this and
pass down all props at once:
<template>
<childComponent v-bind="$props"/>
</template>

instead of:
<template>
<childComponent :prop1="prop1"
:prop2="prop2"
:prop3="prop3"
:prop4="prop4"
...
/>
</template>

All event listeners from parent to child


If you have a child component that is not at the root of the parent
component you can pass down all event listeners from the parent to
the child likes this:

<template>
<div>
...
<childComponent v-on="$listeners"/>
...
</div>
</template>

In case the child component is at the root of its parent it will get those
by default and you do not need this little trick.

$createElement
Each Vue-Instance has by default access to the $createElement
method to create and return virtual nodes. This can be utilized for
example to use markup in methods that can be passed via the v-html
directive. In functional components this method can be accessed as
the first parameter in the render function.
Using JSX
Since Vue CLI 3 it supports the use of JSX by default so that you can
now write your code in JSX if you like to (and maybe come from
React) which comes in handy for example for writing functional
components. If you are not on Vue CLI 3 yet you can make use of
babel-plugin-transform-vue-jsx to have JSX-support!

The custom v-model


V-model is by default what we call 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!

export default: {
model: {
event: 'change',
prop: 'checked'
}
}

Conclusion
I hope I could give you some tips for you to help you become a better
VueJs Developer. If you are also into react Development you should
check out my post 10 Tips & Tricks that will make you a better ReactJS
Dev. Feel free to leave a comment and follow me for more upcoming
posts!

You might also like