10 Tips & Tricks to make you a better VueJS Developer

#vue #todayilearned #productivity #javascript

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!