When I was first introduced to the world of frontend development, I was quickly overwhelmed by the amount of things I needed to know. Or at least I thought I needed to know.

When it came down to learning a JavaScript framework, I remember feeling a bit lost.

There was a lot of information and tutorials and how-tos out there, I simply didn't know where to start.

If you are feeling just as overwhelmed on your journey to learning Vue.js, then I hope this article will help she some light.

Learn and keep learning JavaScript

This may be obvious, but I would definitely advise you to get a good foundation by learning JavaScript.

Vue.js uses JavaScript, so gaining a good understanding of JavaScript will help you learn Vue.js more readily.

I have written an article on what to look out for when starting to learn JavaScript and what aspects of the language are helpful to those starting to learn to write singe-page-applications.

Vue.js Documentation

The first part you will often hear from senior engineers. But reading the documentation to Vue.js is very helpful. In fact, they have been created in such a way, that within one day, you can familiarise yourself with all of the key concept of the core Vue library.

They have been created will lots of care and will definitely help get you started using Vue.

A complete guide of different concepts can be found in the documentation, but here is a quick overview to whet your appetite:

• Vue-directives such as v-if, v-else, v-for etc.
• Handling user input using v-model
• Handling user-initiated events such as clicks and typing
• Props
• Lifecycle Methods such as mounted()
• Structure of Vue Single-File-Components as these are often the ones you will be working on

Build small projects

While you are reading, build something with the topic your are currently on. It does not have to be the next unicorn startup you are building.

Start small.

The more you read, the more the learning accumulate and the bigger your little application can get.

By applying your knowledge your are ensuring that when it comes down to using that knowledge, your fingertips are ready for it.

Have a look at the Style Guide

This makes the documentation for Vue even more special. It has a style guide. It gives you tips and tricks to make your Vue code more clean and readable.

It also helps to keep Vue code consistent across different projects, allowing a new member of your team to pick up the code a lot quicker.

Experiment with Vue

There often seems to be this image that Vue can only be used to build single-page-applications.

While this may be one of its primary use-cases, Vue can also be used as a replacement for jQuery in that legacy applications everyone on the team keeps going on about.

Experiment with the library. Try to build something, get stuck, read the docs, figure it out and there you go. Building things and experimenting with new technologies is a great way to get a grasp on them.

The Vue-Ecosystem

Once you have gotten a good look at the core Vue library, you will eventually read about Vue-Router

Vue-Router

Similar to React, Vue also has its own routing library that gives us that single-page-effect by removing the reloading of the page when navigating from one to the other.

I would again read through the documentation and get down to coding something up using the routing library.

It will certainly help you gain a better understanding of how too solve problems using it.

Vuex

This is a bit more complex, because it involves something called state management.

Whenever you find yourself having to pass data from one component to the other, props tend to be go-to solution.

But as the application grows and the data flow starts to go in more than one direction and you find yourself having to make extra requests to your backend to get the same data you needed in your first component, then the solution you are looking for is called state management.

For Vue this usually means Vuex.

The documentation will again get you up-to-speed with the library and what state, getters, mutations and actions are.

Vuex may well be something that you will use on medium-sized projects, as it simplifies how you manage your data and ensures your data flow is kept clean and easily maintained.

StackOverflow is your best friend

This is certainly nothing new to those that have gotten stuck and needed to consult the collective intelligence on StackOverflow.

It really will help you get rid of that roadblock.

Generally, if you have question regarding anything in Vue, just have a look and ask them.

Vue.js has a great community and they are always ready to help any newcomers to the framework quickly find their way.

Application Architecture

Once you start building more complex applications, the more the actual architecture of your app will begin to play role.

How you structure your files and folders, will play a huge role not only regarding productivity, but also how well you can maintain the codebase.

Nuxt.js is a great tool for building larger-sized Vue projects. It uses Vue.js as a base and takes care of a lot of basics, such as routing, for you.

This allows you to focus more on the actual app and helps keep your codebase organised and clean for the next developer.

Testing

This topic tends to divide teams.

The one team is all for testing, the other sees it as unnecessary code needing to be written.

For me, testing has helped me write only the code I really needed. It has forced me to think about how everything needs to work, before I even wrote a single line of code.

That ensures that my components and pages only contain the code I really need.

It also makes refactoring so much easier. You can make changes to functions that have existed since the dawn of time and by quickly running your test, you can assess whether or not something broke.

That way you don't have to check every single feature in the entire application that uses this function, just to check if something went wrong.

That is very time-consuming and not an efficient use of your time.

Writing test may be a pain at first, but they are well-worth it when it comes down to it.

Styling

After all of that, it may well be time to have a look at CSS-Frameworks the language brings with it.

You can use whatever CSS-Framework you like, but there are two that I feel are particularly popular: BootstrapVue and TailwindCSS.

BootstrapVue, as the name suggests, is the third-parts package to allow Vue developers access to the Bootstrap library. The reason being that Vue and jQuery do not get along very well and Bootstrap 4.x uses jQuery for the JavaScript needs.

With Bootstrap 5.x this is no longer the case and we could happily omit BoostrapVue from our package.json, but there is more to the library than meets the eye.

BoostrapVue

BoostrapVue also has many more components, specifically created for Vue. One that I regularly use is the modal window.

Now it may not be such a big deal to write your own logic to create a modal window, it certainly takes a bit of time to get everything right.

TailwindCSS

This appears to be a rising star among css frameworks and has gained some fame within the vue community.

The concept behind it is awesome in my opinion and makes frontend work a lot smoother.

Unlike Bootstrap and BootstrapVue, there are no flashy modals or pre-configured data tables you can use here. You use each class to add a new rule to your element. The sum of these classes will make your component.

It has everything you need to write your entire css without ever having to leave your html.

Both of these are great and are great to at least experiment with to see what each of them is about.

Nothing will substitute a good solid foundation on CSS.

Conclusion

I hope this gives you a good overview of the different tips you can use to make your learning of Vue easier.

Let me know in the comments what tips I may have missed.