In the previous lesson you found out what we’re going to build: a pixel coloring app!

Here we’ll create the first building block of the application. The smallest unit: a pixel.


In src/App.vue find all the places where HelloWorld appears, and replace them with Pixel. The rest of the code in this file is just like Vue CLI generated it for us:

<template>
  <div id="app">
    <Pixel/>
  </div>
</template>

<script>
import Pixel from './components/Pixel'

export default {
  name: 'App',
  components: {
    Pixel
  }
}
</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>

Now that we told the App component to render the Pixel component, we must build it.

We create it by creating a new src/components/Pixel.vue file. You can safely remove the src/components/HelloWorld.vue file, as we’re not going to use it anymore.

In this Pixel.vue file we put a simple component definition. You saw components that defined a template, script and style tag. This, however, is so simple that it needs nothing more than the template tag:

<template>
  <div class="pixel"></div>
</template>

The pixel is now invisible.

We want it to have a little border so we can see it. In that same file, we add

<style scoped>
.pixel {
  border: 1px solid lightgray;
}
</style>

While we’re here, we set the dimensions of the pixel:

<style scoped>
.pixel {
  border: 1px solid lightgray;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
}
</style>

The final component code is this:

<template>
  <div class="pixel"></div>
</template>

<style scoped>
.pixel {
  border: 1px solid lightgray;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
}
</style>

If you execute it, you will see a little pixel showing up:

Wrapping up

You have created your first Vue component!

In the next lesson we’ll combine this component and replicate it to create a grid of pixels.