Part 7 - Build Steem blockchain application with Vue.js: element-ui, Vue.js devtools and debugging

Repository

Vue.js: https://github.com/vuejs/vue

What Will I Learn?

• Use element-ui in Vue.js application
• Use Vue.js devtools
• Debug Vue.js application

Requirements

• A Node.js environment (Ubuntu 18 + Node.js is used in this tutorial)
• Basic HTML/CSS/Javascript knowledge

Difficulty

Basic level

Tutorial contents

In last tutorial, how to implement an input form and make calls to REST APIs in Vue.js were discussed. In this tutorial, element-ui will be used to build Vue.js UI. Also, a browser plugin called Vue.js devtools will be introduced to help developers’ development and debugging process. Last, a demonstration is given to show how to debug Vue.js components.

Use element-ui in Vue.js

All HTML tags can be used in Vue.js templates, but building a complex UI from scratch is not a good idea as there are plenty of well tested frameworks can be used to speed up the development process. There is no need to reinvent the wheel. In this section, a popular Vue.js component called ‘element-ui’ will be introduced. As a demonstration, Comments component will be implemented by using element-ui. By the end of this section, the application will be able to show user’s comments as shown below:

Online demo: https://vuetutorials.aafeng.top/@aafeng/comments

Install element-ui

First, install element-ui package by running the following command within the project folder:

npm install element-ui --save

Import element-ui in main.js

Open main.js and add the import statement to declare that ‘element-ui’ will be used in the project:

import elementUI from 'element-ui'

Also, declare that ‘elementUI’ will be used by Vue components:

Vue.use(elementUI)

A default theme, e.g. ‘theme-chalk’ will be used in the project:

import 'element-ui/lib/theme-chalk/index.css'

Use ‘element-ui’ in Comments component

To use ‘element-ui’ in the template of Comments component, add the following data attribute in the component code, e.g. in components/Comments.vue:

data () {
  return {
    comments: [] // user's comments
  }
}

Also, add ‘user’ mixin since its attribute, e.g. username will be used later:

import User from './mixins/user' // use user mixin in Posts component

And declare that ‘user’ mixin will be used:

mixins: [User]

Load data from Steem blockchain

Before using ‘element-ui’ to build the template, a call to Steem blockchain needs to be made first to retrieve user’s comments.

First declare that Steem JS will be used:

let steem = require('steem')

Add the following ‘created’ method to Comments component:

created () {
  // Store current component (Comments) to commentsComponent
  let commentsComponent = this 
  // Make call to Steem blockchain to load user’s comments
  steem.api.getDiscussionsByComments({'start_author': this.username, 'limit': this.$store.getters.default_number_of_posts}, function (err, result) {
    if (err) {
      console.log(err.stack)
    }
    // save user's comments to 'comments' attribute
    commentsComponent.comments = result
  })
}

In the above code, as a demonstration, only a fixed number of comments will be retrieved and saved into comments attribute. Similarly to Posts component, an infinite loading feature can be implemented here as well.

Now, it is ready to use element-ui components in the template. In this case, ‘el-table’ will be used to display user’s comments:

<el-table
  v-loading="loading2"
  element-loading-text="Loading"
  element-loading-spinner="el-icon-loading"
  element-loading-background="rgba(0, 0, 0, 0.8)"
  empty-text="No data"
  :data="comments"
  style="width: 100%">

In the above code, apart from setting default attributes for ‘el-table’, ‘:data’ attribute is used to link the ‘el-table’ element with ‘comments’ data attribute.

Now it is the time to let ‘el-table’ know what data should be displayed in each column. In here, as a demo, the creation time of the comments, parent author, the post title, and the comment text will be displayed. In addition, the creation time and parent author will be sortable. If more fields needs to be displayed, check Steem JS documentation, or find out all attributes from browser’s development tool. In the last section of this tutorial, how to debug Vue.js will be discussed and Comments component will be used as an example. The code is shown as follows:

<el-table-column
  prop="created"
  label="Date"
  sortable
  width="180">
</el-table-column>
<el-table-column
  prop="parent_author"
  label="Parent author"
  sortable
  width="180">
</el-table-column>
<el-table-column
  prop="root_title"
  label="Post"
  width="180">
</el-table-column>
<el-table-column
  prop="body"
  label="Comment">
</el-table-column>

From the above code, ‘prop’ property is used to link a column to a particular data attribute returned by Steem JS.

So the current application runs like:

Vue.js devtools

It is the time to introduce Vue.js devtools, which makes developers’ life much easier.

Vue.js devtools

Vue.js devtools is available for both Chrome and Firefox browser. The download URLs are:

Chrome plugin

Firefox Add-on

Once installed, run Vue.js application the the development mode. (NB: this tool won’t be available for production mode) Open browser and access Vue.js application. Right click and choose ‘inspect’:

Switch to ‘Vue’ tab and the page looks like:

Within Vue.js devtool, ‘Components’, ‘Vuex’ and ‘Events’ tabs will be available:

Click ‘Profile’ component, data attributes and computed attributes will shown as follows:

Click ‘userdata’ under ‘Profile’ component, userdata from user mixin will be shown:

A full list of user’s comment attributes can be found by Comments data attribute:

As discussed in previous tutorial, a state e.g. ‘default_number_of_posts’ has been stored by using Vuex. In here, the devtool can be a helper to check if the state has been set correctly:

A full demonstration of how to use Vue.js devtool plugin is shown in the GIF image:

Debugging Vue.js application

Another way to debug Vue.js code is to use browsers’ development tool. Like debugging in IDEs, breakpoints can be set to control the execution flow and gives developer a chance to check the current execution states.

First open developer tool, Choose 'Sources' tab, then scroll down to 'webpack://' and click Comments.vue. Add a breakpoint in line 52, e.g. the line with "if" statement:

Reload the page, the JavaScript code will break in the “if” statement, so the Comments component won’t display any data, as shown below:

In the developer tool console, some checks can be performed, e.g. check if a correct result is returned after calling Steem API:

After debugging, the breakpoints can be easily removed by click this icon:

Curriculum

This is the 7th tutorial.

Previous tutorials

Part 1 - Build Steem blockchain application with Vue.js: installation and first demo
Part 2 - Build Steem blockchain application with Vue.js: components, computed properties and build/deployment process
Part 3 - Build Steem blockchain application with Vue.js: using Bootstrap, nav component, mixins, and first iteration of Posts component
Part 4 - Build Steem blockchain application with Vue.js: dynamic route, and event handling
Part 5 - Build Steem blockchain application with Vue.js: Passing data among components, state management via Vuex, and data persistent in Vue.js
Part 6 - Build Steem blockchain application with Vue.js: input forms and handling REST API calls

Proof of Work Done

Source code for this tutorial: https://github.com/aa-feng/VuejsTutorial/tree/t07

Master branch of the source code (will be updated with ongoing tutorials): https://github.com/aa-feng/VuejsTutorial

The live demo of latest iteration: https://vuetutorials.aafeng.top