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. 👍
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
decrement methods. Can you do this before continuing?
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.
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 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. 😃
Bring up your terminal and initialize a Node project, like so:
npm init -y
Now we have a
package.json and can start using NPM modules. The modules we need are;
parcel-bundler— Parcel instance
vue— The Vue library
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.
.babelrc file at the root out of project.
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. 👍
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
creating the src folder with two Vue components inside
Can you guess what each component does? Yup, you betcha!
app.jsThis will be our main entry for Parcel. Parcel treats this file as single source of truth. We can specify this file at our
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!
Each syntax is divided by the following section;
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
template property where we declared our HTML? Well we have a dedicated section for that now.
data properties? We have a dedicated space for them too now!
Looks familiar? We just cleaned up our component by a huge margin.
The Vue developer tools are a must have for debugging and increasing productivity.
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