Vue - Lessons learned

Vue - Lessons learned

Today I’m going to share my Vue journey with you. Kirby now uses Vue for panel plugins and I feel like home here in the Kirby forum. That’s why I write here and not in the Vue forum.

By building a tool (not related to Kirby) for about a month, I’ve learned a few lessions.

Computed vs methods

It can be hard to know when to use a computed property and when to use a method. Computed properties don’t accept any arguments. Therefor, my rule is to start using a computed property and later, if it requires an argument, move it to a method. Often computer properties are faster because they are cached.

Events are very nice

It’s possible to do something like below:


<button

@keydown.ctrl.76.exact.self.prevent="myMethod()"

></button>

The above listens to CTRL+V with an exact match, to only this element and it prevent default events.

Models are pure magic

When adding a list of checkboxes for example, it can be tempting to add all the interactivity yourself. You use a click event and then add the value to an array and if it’s unchecked you remove it from the array and so on. It’s not hard but it takes time, especially with many components. Instead, add a model to the checkboxes and Vue solves it all magically.

Vuex to manage global data

For larger tools I recommend to use Vuex as soon as possible. Then you store the global data as state and you can then get it from any component. You don’t need to send data between child and parent components as props. But, don’t only use Vuex. Sometimes you don’t need to send data to other components and then props will do fine.

Mixins not good enough

Evan You, the creator of Vue is not happy with mixins and will roll out a new feature in Vue 3 that can replace Mixins. I like the new approach better and it’s possible to use it in Vue 2 as well.

It’s done like a pure function, kind of like this (using Vuex):


function myMixin(this) {

this.$store.commit('myMutation', {some: data});

}

In Vue 3, this does not need to be passed. Mixins will not be deprecated but the new approach has less flaws.

More about it here: https://youtu.be/7_ZzayG45Mk?t=1140

Vue Router for multiple pages

In javascript it’s possible to use history push to change the url, but Vue Router is perfect for the job. It can be tempting to use <a href links to link to the pages. Instead it works better to use <router-link. In some cases it’s faster and it will add some css classes to that element that can be useful for styling.

Vue Cli is not for me

I have also tested Vue Cli. It took a while to install and it added 100 Mb to my disc. It also added a structure and a user interface to add modules like Sass etc. Everything worked, but I felt it was too much magic for my taste. Something like WordPress or maybe even Skynet was taking over. I wanted to regain control, so I ended up using plain javascript files and Gulp to bundle and compress my javascript and my scss files.

My project is getting quite large and I still don’t see a big problem with my approach. However, I can’t have Sass css in my component file, but for me I don’t need that. My Sass files often grow anyway, so I like to keep them separated.

At some point in the future I may try Parcel out, but I’m not mentally there yet.

Memory gotchas

I ran out of memory a few times. It’s quite common with Vue, often when using libraries outside Vue. In my case it may have been two main reasons.

One reason was that I was sending data as an object to 100 child components. I expected it to update one component when I change the data for it, but instead it updated them all. Sending the same data as strings solve that specific problem. Why I don’t know yet.

Another reason was that I ran a v-if on data.length on my parent component. It used a big data object with hundreds of nested objects. When I changed a value inside the data object, it needed to reload everything again for some reason. I saw someone on Stackoverflow having the same problem. My solution was to cache the length into another variable that only was triggered when created.

Both of the issues I was dealing with was due to the fact that it was too much reactivity involved. It’s often the strength of Vue but can cause problems as well.

Axios instead of Fetch

I think Axios is better than fetch at the moment. It makes my code shorter and has better error handling.

Other than that, I try to not rely on too many libraries, except for the ones built by the Vue crew.

Sources for learning fast

I learned by looking at videos first. I don’t remember everything but when learning the concepts it’s easy to go back and relearn again later.

The best way to get started may be like how I learned which was to see all the 40 videos by The Net Ninja and then build something really big. Then you are asking for problems to solve which makes you learn and deal with all kinds of problems.

Also both Google, Stackoverflow and the Vue forum are good sources when stuck.

What do you think?

Do you have own lessions learned that can be useful to me or others? In that case, please write!

Thanks!

7 Likes

Hey,

thanks for your great post @jenstornell! I have to use Vue in the future and I feel like your post will save me some headaches and time. I would love to see other people contribute to this post with their experiences and then we got some cool reference for common issues/situations you might face.

Best Regards,

2 Likes