Build Better UIs with Vue.js

Among the myriad of new web frameworks, Vue.js has been among the most popular amongst developers. In fact, it’s the most popular JavaScript framework on GitHub, outflanking even React and Angular. Besides being fairly easy to use, Vue.js’s focus on the view layer makes it easy to integrate into big projects for front-end development without any conflicts.

I introduced the Vue.js framework to my readers in the Getting Started with Vue.js article. Now, we’re going to look at the structure of a Vue Component and build our own. The reason is simple: as the basic building blocks of your Vue app, Vue Components are what you’ll spend most of your time working on.

The HelloWorld Component

When we created our “vuejs-project” project with the Vue CLI in the last article, it generated a couple components for us: the App.vue root component and the HelloWorld.vue component. You’ll find the App.vue file within the /src/App.vue directory, while the HelloWorld.vue file resides in /src/components/.

These component files ending in .vue are single file components. In other words, each vue file is its own component. A Vue file always contains 3 different sections:

1. template: This is where our HTML is placed. We can also define non-HTML elements here.
2. script: This is where the logic of our app resides.
3. style: This is where our CSS is placed.

If you open the HelloWorld.vue component in a text editor, you can make changes here that will appear in the app’s user interface. For example, you can modify the script to return a different message:

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome Rob!'
    }
  }
}
</script>

Save the file and execute the npm run dev command to see the updated app:

Replacing the Default HelloWorld Component

The default HelloWorld component is really just a placeholder, so don’t hesitate to replace it with something specific to your application. Here’s a component that I created named “MyMessage.” I saved it to the components folder as “Msg.vue.” It’s just a simplified version of the HelloWorld component. In a real application, it could contain significantly more code:

<template>
  <div class="msg">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'MyMessage',
  data () {
    return {
      msg: 'Welcome Rob!'
    }
  }
}
</script>

Now we need to include it in the main view. To do that, we need to import the file into the index.js file (without the .vue extension) and add the component to the routes array:

import Vue from 'vue'
import Router from 'vue-router'
import MyMessage from '@/components/Msg'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'MyMessage',
      component: MyMessage
    }
  ]
})

Setting the Main Title

In single page apps, the document title can be set to a default or change according to the routing. Vue.js gives you the option to do both. By default, the default title is the letter “y.” There are a few ways to change it. One of the easiest is to include the created() event handler in the main.js file. It’s a JavaScript function that gives you direct access to the document.title property:

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  created () {
    document.title = 'A custom title';
  }
})

Replacing the Logo Image

The assets folder contains the logo.png image that displays at the top of every page (the big V). You’ll probably want to change that to your own. You’ll find it in the App.vue file. Here is the template with my own image:

<template>
  <div id="app">
    <img src="./assets/gravelle.jpg">
    <router-view/>
  </div>
</template>

Vueing the Results

Go back to the app page in the browser and you’ll see the new title, header logo, and MyMessage component in their full glory (if you closed the page, you’ll have to reissue the npm run dev command from a command prompt and navigate to http://localhost:8080 in your browser):

The contents of the project src folder are hosted on GitHub.

Going Forward

In today’s article we saw how easy it is to create your own components using the Vue.js framework. Of course, that’s just the beginning. In future articles we’ll learn how to handle events, bind data to form controls, and more!