10 tips and tricks to help you become the best developer on VueJS

Here is a free translation of the article " 10 Tips & Tricks to make you a better VueJS Developer " from Dev.to. The author will tell us about interesting and useful options for using the usual VueJS tools.

Introduction

I really enjoy working with VueJS and every time I do this, I dive deeper into its capabilities and features. In this article, I present to you 10 cool tips and tricks that you probably did not know about and will try to help you become the best developer on VueJS.

Let's make the syntax of the slots beautiful

With the release of Vue 2.6, abbreviations for slots became available, which can be used as events (for example, the abbreviation @click



for v-on:click



) or a colon for data binding ( :src



). If you have for example a table component, then you can use the following feature:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

$ on ('hook:')

This is a cool feature that you can use if you need to define a custom event listener or a third-party plugin in the created



or mounted



hooks and you need to remove it in the beforeDestroy



hook to prevent memory leaks. Using $on('hook:')



you can define or remove an event in just one hook.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Validation props

Perhaps you already know that it is possible to validate your props with primitive values, such as String



, Number



or Object



. But you can also create a custom validator, for example to check an array of strings:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Dynamic directive arguments

One of the coolest features of VueJS 2.6 is the ability to dynamically determine component directive arguments. Imagine that you have a button component and you want to listen to the Click



event under certain conditions, and the DoubleClick



event in all other cases. Here is a case where such a directive might come in handy:

 <template> ... <aButton @[someEvent]="handleSomeEvent()"/> ... </template> <script> ... data(){ return{ ... someEvent: someCondition ? "click" : "dblclick" } }, methods:{ handleSomeEvent(){ // handle some event } } ... </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

And what’s really cool -> that you can apply this template to dynamic HTML attributes, props and much more!

Reusing components for similar routes

Sometimes you have different routes that use some set of components. If you switch between such routes, then by default the common component will not be redrawn, because Vue will reuse this component for better performance. But if you want to redraw these components, you can define the :key



property in Router-View-Component



:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Pass all props from parent to child component

This is a really cool feature for passing down all the props from the parent component to the child component. This method is convenient if, for example, you use the wrapper component. Thus, instead of passing all the properties in sequence, you just need to pass them all at once:

 <template> <childComponent v-bind="$props"/> </template>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Instead of this:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Pass all event listeners from parent to child component

If you have a child component that is not root for the parent component, you can pass down all event listeners from parent to child like this:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

If the child component is at the root of the parent, then you will not need such a trick and all events will be available by default.

$ createElement

Each Vue instance has access by default to the $createElement



, which creates and returns virtual nodes. This can be used, for example, to use markup in methods that can be passed to the v-html



directive. In functional components, this method is available as the first argument to the render



function.

Using JSX

Starting with Vue CLI 3



, JSX support has appeared by default. Now you can write your code using JSX (for example, if you are more accustomed to it after the reaction), it can also be more convenient for writing functional components, for example. If you are not already using Vue CLI 3



, then you can use babel-plugin-transform-vue-jsx



to support JSX in your project.

Custom v-model

By default, v-model



is what we call syntactic sugar over @input



and :value



events. But you can specify the model



property in your Vue component and determine which event and props will be used:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Conclusion

I hope I was able to give you some tips to help you become the best VueJS developer.