DEV Community

loading...
Cover image for 6 essentials tips for VueJs from 2.5 years experience #1

6 essentials tips for VueJs from 2.5 years experience #1

CodeOzz
Creator of https://www.chillflix.art 💻 4+ years of coding ! https://twitter.com/Code__oz📝 Love writting article dev and sharing ressources !
Updated on ・2 min read

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)
            }
        }
    },
Enter fullscreen mode Exit fullscreen mode

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

Trigger Watcher on initialization

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

⚠️ 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 ...
      }
    }
}
Enter fullscreen mode Exit fullscreen mode

Handler is the function triggered when property is modified.

Apply class and style dynamically

<div :style="{ 'background': isActivated ? 'black' : 'white' }">
Enter fullscreen mode Exit fullscreen mode

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 }">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)
    },
}
Enter fullscreen mode Exit fullscreen mode
<ul v-if="todos.length">
    <li v-for="todo in todosNotCompleted">
    {{ todo }}
    </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

You can pass all props from parents to child

<child-component v-bind="$props"></child-component >
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

This equal to

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

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 !

Discussion (16)

Collapse
rolanddoda profile image
Roland Doda

Nice article. I wrote a similar one last year -> 8 secrets vue devs must know.

The truth is that I have other "secrets" to share. I hope I can find the time so I can publish a new article soon.

Collapse
codeozz profile image
CodeOzz Author

Thanks ! I will check this soon :D

Collapse
yarip28 profile image
Yarip28

Begin vue js 5 days ! perfect timing !

Collapse
rayleigh93 profile image
Rayleigh-Sama

Nice tips !

Collapse
pawelmiczka profile image
Paweł Miczka

From my point of view as a Vue developer with 4 years of experience I have two advices:

  1. Switch to Composition API
  2. Use TypeScript (it works great with Composition API)
Collapse
charlenebx profile image
Charlène Bonnardeaux

Thanks for this tips! I just don’t really understand the validator usage, but i going to make some search! ;)

Collapse
codeozz profile image
CodeOzz Author

Thanks Charlene ! Validator is usefull since you can check if you props is 'validate' for exemple if a child component accept only the following string => 'one' or 'two' as props value, the validator will inform you that your props have an issue if you pass another value (for exemple: 'four').

You can also use validator for type checking (if you pass a number, vue will inform you that you have an issue in your code)

For more information : vuejs.org/v2/guide/components-prop...

Collapse
charlenebx profile image
Charlène Bonnardeaux

Thanks for this useful l’explication ;) I going to use it in my next project followings your advices ;)

Collapse
christophervistal25 profile image
Christopher Vistal

Nice and Clear

Collapse
codeozz profile image
CodeOzz Author

Thanks Christopher !

Collapse
nguyenquangtin profile image
Tony Tin Nguyen

Thank you @codeozz .

Collapse
codeozz profile image
CodeOzz Author

thanks tony !

Collapse
sheelss profile image
Sheelss

Thanks

Collapse
codeozz profile image
CodeOzz Author

Thanks sheelss

Collapse
vlaem profile image
Alvaro

Wow this is amazing, I didnt know about the first two and I've bee working with Vue for a couple of years now.

Collapse
codeozz profile image
CodeOzz Author

Happy to see your comment ;D