6 essentials tips for VueJs from 2.5 years experience #1

Hey how are you ! Welcome here my name is Code Oz and I will share with you some tips on VueJs (I have 2.5 years experience with this framework)

Always use validator on your props, in order to check if the value passed from parent to child is correct

    props: {
        toto: {
            type: String,
            required: true,
            validator: function (val) {
                return [ 'a', 'b' ].includes(val)
            }
        }
    },

If validator detect an error, vue will trigger an Vue Warn !

Trigger Watcher on initialization

watch: {
    toto: (newValue, oldValue) => {
        // logic here ...
    }
}

⚠️ This will be trigger when toto will changed, but not be triggered at initialization.

If you want to trigger your watcher during the initialization phase, you can use immediate property !

watch: {
    toto: {
      immediate: true,
      handler(newValue, oldValue) {
        // logic here ...
      }
    }
}

Handler is the function triggered when property is modified.

Apply class and style dynamically

<div :style="{ 'background': isActivated ? 'black' : 'white' }">

You can also apply a class/style only if the value is true !

// If isActivated is false, class will be not applied
<div :class="{ 'toto-class': isActivated }">

Never Use V-if with V-for

NEVER ! and why ?

When you are doing this 👇

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

When you are using both in the same node, the v-for has a higher priority than v-if, so v-if will be trigger in EACH iteration of the v-for !

To avoid this, you can replace your code by 👇

<ul v-if="todos.length">
    <li v-for="todo in todos">
    {{ todo }}
    </li>
</ul>

But if you want to use the v-if for isComplete attribute, the best way is to create a computed based on the condition.

computed: {
    todosNotCompleted() {
        return this.todos.filter(todo => !todo.isComplete)
    },
}

<ul v-if="todos.length">
    <li v-for="todo in todosNotCompleted">
    {{ todo }}
    </li>
</ul>

You can pass all props from parents to child

<child-component v-bind="$props"></child-component >

V-model

v-model is a directive in order to create two-way data bindings on a component !

<input v-model="message" placeholder="edit me">

This equal to

<input :value="message" @input="message = $event.target.value" placeholder="edit me">

Use it as shorthand when you need to update a value or emit a value when this value changed !

I hope you like these tips ! There are basic and I will share more tips on Vuejs (more advance) afterwards !

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and MP me 😁

Or get it HERE

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!