From zero to hero with Vue — Advanced Components, Parcel, Dev Tools

So far we made a simple Vue component which renders plain HTML. What if we want the component to have interactivity? Here’s how we can to that.

Let’s create a counter component. Be my guest to implement the counter component before continuing…learning by doing is the most efficient way to mastering. 👍

Implementing the counter component

A counter is simple. The counter has 3 moving pieces

• The sum of the counter
• The decrement button
• The increment button

Markup for the counter

Declaring and rendering the counter component

If we open the browser, we should see this;

oops! looks like we forgot to create our sum property

What I love about Vue is the errors are made for us… humans.

[warn]: Property or method “sum” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

We can clearly understand what Vue expects from us. Vue wants us to declare the initial sum property.

Okay, fair enough!

creating our sum property

Like we did before, right!

data must be a function instead object

Well, almost… you see Vue expects the data property to be a function — I promise for a good reason. A component’s data option must be a function, so that each instance can maintain an independent copy of the returned data object.

Think of it like this — if we have more than 1 counter, how should we keep track of their sums?

Data is a function

Notice the change; data is a function now, which returns an object. This way each instance of the component can keep track of its internal state.

Great! Time to create our increment and decrement methods. Can you do this before continuing?

Ready?

increment and decrement methods

Here’s the final crop;

Works like a charm!

Bonus tip; Quick demonstration why the data property must be a function; Imagine if we have 5 counters;

Each counter has their own internal state now; the sum in this case.

Adding a module bundler

The long waited time has come — we’re going to add a module bundler. You see — Vue is somewhat unique. Vue has its own .vue files which contain the html, javascript and styles. It’s truly fun to work with! For the .vue files we need a module bundler.

The module bundler of my choice will be Parcel since it’s really easy to setup. I’m using Parcel since the purpose of this series is to learn Vue. 😃

Everything You Need To Know About Parcel: The Blazing Fast Web App Bundler 🚀

Bring up your terminal and initialize a Node project, like so:

1

npm init -y

Now we have a package.json and can start using NPM modules. The modules we need are;

• parcel-bundler — Parcel instance
• parcel-plugin-vue and @vue/component-compiler-utils — .vue support
• vue — The Vue library
• babel-preset-env and babel-plugin-transform-runtime — babel is the compiler which allows us to use new features

Good job! Two final things left to do before we can start using .vue files. We need to tell parcel where our index.html is. Add a start script like the one below.

Adding babel

If you never used babel before, it’s basically a compiler which allows us to compile newer javascript to older javascript which the browser understands.

Create a .babelrc file at the root out of project.

touch .babelrc

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which…_babeljs.io

Now we can start our development server which includes hot reloading, .vue support, fast development server, code splitting and many more features out of the box — how cool is that!?

If you go to http://localhost:1234 we should see our Vue app.

Awesome! There are many advantages having a server instead editing local files — the most convincing features are: Vue Dev tools, hot reloading, .vue components, building and shipping the app to a production server. We’ll cover all of those features later on. Good job for making it this far! You’re getting the hang of it. 👍

Refactoring to .Vue components

Currently we have a single file which holds all the logic and markup. The modern approach to building single page apps is to split the app to manageable components.

It’s time we start thinking about how to structure our app. Common pattern is to create a src folder and place app specific logic there.

Let’s create the src folder and two .vue files. App.vue and Counter.vue

creating the src folder with two Vue components inside

Can you guess what each component does? Yup, you betcha!

• app.js This will be our main entry for Parcel. Parcel treats this file as single source of truth. We can specify this file at our package.json

We’re now importing Vue instead of using the CDN. We’re far at the SPA land now, no turning back! Also new property called render — this renders our markup. It’s a function and we pass our App.vue component as the sole argument. Basically the render functions turns the App.vue into something the browser can understand.

Bring out the big guns, it’s time to reveal what a .vue file looks like.

Woah! Looks strange at first, doesn’t it? Well, it all makes sense actually.

.Vue components are neat — they include 3 different syntaxes. Yes — 3!

We can write valid HTML, Javascript and CSS inside our .vue files.

Each syntax is divided by the following section;

• HTML

  

• Javascript

  

• CSS

  

The reason why we want to do it this way is simple — we can create encapsulated components with dedicated responsibilities. Think as SPAs human bodies — each organ has its responsibility and functionality — same goes for each .vue component.

Remember the template property where we declared our HTML? Well we have a dedicated section for that now.

Remember the methods and data properties? We have a dedicated space for them too now!

Here’s the Counter.vue component

Looks familiar? We just cleaned up our component by a huge margin.

Fantastic job!

Vue Dev Tools

The Vue developer tools are a must have for debugging and increasing productivity.

Here’s the download link for Google Chrome and Firefox.

After you installing, you should be able to see a little vue icon pop up.

If you click on it;

Open the browser console and find the Vue tab.

The dev tools are very useful once our app grows in complexity. The tools allow us to see the full tree of components, manage our state and many more useful tricks. Later on we will unlock all these magical features with Vuex.

Vuex is a state container, similar to Redux. Read more about Vuex

Thanks for reading, stay awesome! ❤

If you like this, check out my twitter