5 Tips to Know Before You Start Developing in VueJS

With the rise of VueJS’ popularity, there are new things being discovered every day to make the language as powerful as possible. As a VueJS user myself, I’ve been learning new optimizations or workflows that make development so much easier. From using mixins to simplify code to passing properties between components, there are so many tricks that I wish I knew starting it. Here are some of the most useful ones and a few more advanced techniques that I hope will help your development process.

While this list isn’t a complete and comprehensive beginner’s guide to VueJS, I think it will help beginner developers know what to watch out for and give them a kickstart in their learning process.

1. Know The VueJS Lifecycle Very Well

This is very well documented but I think it is very useful to take a step back and think about what is happening at each hook in the life cycle. Early on, I included external script and API calls in mounted() and it was slowing down the page load speed. The hooks that I’ve used most often in VueJS lifecycle have been the ones involved with loading the site:

• beforeCreate — this hook is called immediately when the component is initialized. However, events and watchers have not been set up yet and any data or methods cannot be called
• created — this hook called right after the component is initialized. Everything in this component is accessible except for the DOM elements so $el will return null.
• beforeMount — as the name suggests, this hook is called right before the mounting. The DOM elements of the component are still not accessible
• mounted — this hook is called after the instance has been mounted, meaning that the DOM elements will be accessible by using vm.$el. According to the VueJS Docs, this method does not guarantee that all of the child components have been mounted, so if you want to ensure that you can always wrap your code in a nextTick() function.

These were just the ones that I found myself using the most often and being the most confused about early on. If you want more info and want to see the rest of the lifecycle hooks, check out the VueJS Docs for more.

2. Use Vuex to Manage State between Components

If you have ever found yourself getting caught in a rabbit hole of passing props and data between several components, you’ll know the true struggle of trying to make sure that all of your data stays consistent and is accessible everywhere that needs it. Well, those days are now in the past thanks to Vuex.

Vuex is a state management pattern that stores a consistent state of data and can be accessed and manipulated by all components. This makes the problem of updating data between components a walk in the park. It is also very easy to set up with your project, all you have to do is add it to your main Vue file using the line and create your state management system. Setup is super simple and is very well explained in their documentation.

3. How to Make Calls to a Server

For many applications, VueJS needs to be able to communicate to a backend server in order to complete a lot of its requests. These requests can be updating or reading from a database such as Mongo, calling O-Auth scripts, you get the idea. So how do we do this in VueJS? From my experience, the best method is to use axios — an http request manager for node.js. It allows you to send XMLHTTPRequests easily. All you have to do is give axios the baseURL of your server, and it handles all of the requests and even handles the return data.

4. Hiding a Component Until It’s DOM is Loaded

While this is a very easy tip, it took me a while before I finally discovered this little trick. V-cloak is a directive that is associated with every element in a VueJS component until that component is fully loaded and compiled. It can be access in CSS by using the query [v-cloak]. Then, all you have to do is set the display to none, opacity to zero, visibility: hidden or any method you want to use to hide your element.

However, another trick I like to use is to declare a variable in VueJS called loaded and set it to false by default and set it to true in the mounted method after the DOM has loaded. Then, I use the conditional v-if=’loaded’ when writing my HTML. This will only show the loaded page after the mounted method. I normally like to add visual feedback showing the page load by adding a sibling to the main component that is visible with a v-else — meaning that it will be visible whenever the main method is not.

5. Vue Router Hooks

Using Vue Router is a must for almost every Vue application. With a very intuitive design it is very easy to see why it is a super popular option for managing different pages. However, one underutilized aspect of Vue Router is the ability to redirect or change requests using the Router Hooks.

If you are interested in how to handle subdomains using Vue Router, I wrote an entire blog post about that should really help you understand the hooks. There are two main types of global navigation hooks:

• router.beforeEach (to, from, next) — called before the router is directed. This makes it so simple to redirect or change a request once it has been made. I’ve used this hook a lot in my current project in order to redirect subdomains to the proper component. If you want to learn more about this, check out my article here. This hook requires a next() call in order to continue the router
• router.afterEach (to, from) — this is called after the router is directed, and it cannot affect navigation.

I really hoped this helped even just a little bit — this are just the tips that would have saved me a lot of time when I was starting out. Leave your tips below!