Taking a bite out of Vue.js, how to get started

Keep learning new things to enhance your skills

Have you heard the advice, “eat the frog”?

The point is we need to do the hard things first. Although research has shown this is wrong.

In Michael Hyatt’s book Your Best Year Ever he discusses how the best way to get started is to do the easy things first.

That is why when I started learning Vue.js I began on the shallow end.

Firstly I began watching videos and then reading documentation. Then I began kicking the tires on some code.

Why learn Vue.js?

After working with many other JavaScript frameworks this is the obvious question. While others had a steep learning curve I have found Vue.js quite easy.

VueJs is very easy to learn and easy to use. It uses components as building blocks that are small, reusable, and can be dropped in different parts of the application. — Let’s Code

Additionally, there are a lot of resources to get started. I will dive into those next.

How to learn?

This is a personal question. I learn by getting a view of the landscape. What is the big picture?

Where you might go right to the code, I like to see the puzzle pieces.

This above all: to thine known self be true. -William Shakespeare

Suppose you don’t know how you learn. Try something. See how it goes.

Pace your learning. Don’t go too fast. Early in my career, I would rush through things. Take your time and enjoy the process.

Videos

Here are a few videos I found helpful in getting a firm grasp of the Vue.js landscape.

This video dives into Vue 3(The Current Version). The video quality is top-notch in this one. It walks you through creating a website with an online cart.

The explanations are quite thorough. The graphics help reinforce the learning. The chapters are set in the video too. So if you need to jump back you can quickly find it.

In this video, Gwendolyn Faraday starts with the basics. She breaks this into two parts. First off she Vue instance, directives, and methods.

From there she goes into part 2 covering the CLI(Command Line Interface), dev tools, and the router.

Udemy

Udemy has some wonderful classes. This Vue Masterclass from Boris Paskhaver covers a great deal. He gets you started with setup items. Installing Vue, Node, using VSCode, and handy extensions.

Boris also covers typical challenges that come up. For instance, he goes through using CSS with Vue. There is coverage of how to test your Vue code. Note Udemy course does cost money.

Documentation

The team with Vue.js does a great job documenting things. Earlier in my career open-source meant little to no documentation. Today that has changed.

This introduction covers a lot of ground. Then if you continue from there the Quick Start is also quite thorough. Overall the documentation is impressive.

Mentor

As you begin to learn something new find a mentor. I am fortunate as a co-worker who has been a great mentor. I can ping him with questions.

If you don’t have one where you work look elsewhere. One great place is user groups and meetups.

I used to live in Des Moines. They have many great groups like DSM Web Geeks, Iowa .Net User Group, Central Iowa Java User Group, and others. Search your area for potential groups. Meetup is a great place to start.

Your mentor could be online too. For instance, Codementor offers mentoring and guidance. There is a cost associated with this. I have no affiliation with them.

Github

A great place to learn is to jump into the code. GitHub and other online code repositories have many examples.

<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

This is a simple example I have on my GitHub repo. As you review the code clone the repo and play with it yourself.

Vue.js is a wonderful thing to learn. Find a way to learn something new yourself. Each of us approaches new things in our own way. Experiment and find your learning style.