The Long Walk

Creating a Running Game in VueJS - Part 2 - Components

January 30, 2021

This is the second post in a series that started here. If you’d like some context, then please visit the first post. In this post, I’ll be refactoring the small amount of code that we currently have, into Vue Components.

You can find the code for this post here.

Refactoring into Global Components

Let’s start with a very simple component, and that’s the display of “Seconds Remaining”. For the time being, we’ll create this in the same file, so all we’re doing here is shuffling code around. Instead of the following code:



<p>{{ secondsRemaining }}</p>

We’ll add this:

[code lang=“html”] <div id=“app”> <div v-bind:style=“location”>

    <seconds-remaining       v-bind:seconds=“secondsRemaining”>                 




A quick note on this, you may see the following syntax:

[code lang="html"]
<div id="app">
    <div v-bind:style="location"></div>
    <seconds-remaining 
        :seconds="secondsRemaining">
    </seconds-remaining>            
</div>

Essentially, here the v-bind is implicit. Both work.

We can then define this inside the script tag like so:

[code lang=“html”]

A blog about one man's journey through code… and some pictures of the Peak District
Twitter