create account

Part 2 - Build Steem blockchain application with Vue.js: components, computed properties and build/deployment process by aafeng

View this thread on: hive.blogpeakd.comecency.com
· @aafeng · (edited)
$26.38
Part 2 - Build Steem blockchain application with Vue.js: components, computed properties and build/deployment process
![](https://cdn.steemitimages.com/DQmSnFb8dojCSjhpeXagQowTaqY11zrwfaxbXJsffKyYY6T/image.png)

## Repository

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

## What Will I Learn?

* Vue.js components
* Computed properties
* How to build and deploy 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, you have learned how to setup Vue.js development environment, and build your first Vue.js application to read user profile from Steem blockchain. In this tutorial, you will learn more about Vue.js components, adding computed properties to Vue.js components, and how to build and deploy Vue.js application. 

### The aim of this tutorial

As demonstrated [here](https://vuejstutorials.herokuapp.com), you will add three new components, e.g. Posts, Comments, and Activities and within each of these components, Profile component is included. You will also refactor Profile component to add computed properties and use them in the template. Last but not least, you will learn how to build your project for production and how to deploy your project to a web server.

### Add new components

As shown in the wireframe below, three components will be added, e.g. Posts, Comments, and Activities. In addition, Profile will be used in each of these three components.

![](https://cdn.steemitimages.com/DQmW3bJjagEbmuABgRbNmTbTgqszCHBzk2LMpoyWPVmKJ5o/image.png)

To do so, you will need to create three files, e.g. Posts.vue, Comments.vue, and Activities.vue in src/components folder. For now, the three components are very similar - the actual code to load information from Steem blockchain will be added later. For example, the content of Posts.vue is:

    <template>
      <div>
        <Profile></Profile>
        Posts
      </div>
    </template>

    <script>
    import Profile from './Profile'
    export default {
      name: 'Posts',
      components: {
        Profile
      }
    }
    </script>

    <style scoped>
    </style>

In the above code, a new component called ‘Posts’ is defined:

    export default {
      name: 'Posts',
      ...
    }

Since Profile needs to be included in the ‘Posts’ component, it needs to be imported first:

    import Profile from './Profile'    

Also, it needs to be declared within the ‘Posts’ component:

    components: {
      Profile
    }

Then the ‘Profile’ tag can be used in the template:

    <Profile></Profile>

Similarly, you can define ‘Comments’ and ‘Activities’ component.

Now you may want to use ‘Posts’ component as the default page, and use ‘/comments’ and ‘/activities’ to access ‘Comments’ and ‘Activities’ component. To do so, you need to update the router, e.g. make changes to router/index.js:

    import Vue from 'vue'
    import Router from 'vue-router'
    import Posts from '@/components/Posts'
    import Comments from '@/components/Comments'
    import Activities from '@/components/Activities'

    Vue.use(Router)

    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Posts',
          component: Posts
        },
        {
          path: '/comments',
          name: 'Comments',
          component: Comments
        },
        {
          path: '/activities',
          name: 'Activities',
          component: Activities
        }
      ]
    })

You may notice that the URL for your application is a bit strange, e.g. the URL for default page is “http://localhost:8081/#/” and the URL for comments is “http://localhost:8081/#/comments/”. The reason for this is because Vue.js has two modes to manage the URL: ‘hash’ mode (default mode) and ‘history’ mode. You can add the following line to router/index.js, just before routes definition:

    mode: 'history',

After this change, the url looks normal, e.g. the default page will be accessible via “http://localhost/” and the comments page is accessible via “http://localhost/comments”.

Something is still missing, right? Yes, users can hardly switch between these components/pages. So you need to add a basic navigation bar. Just add the following to  App.vue, before “<router-view/>”:

    <nav>
      <router-link to="/">Posts</router-link>
      <router-link to="/comments">Comments</router-link>
      <router-link to="/activities">Activities</router-link>
    </nav>


### Refactor existing code and add computed properties

Now you will learn how to add user’s voting power and reputation to the profile. As those information are not stored in the json_metadata returned by Steem js, so a new data attribute ‘userdata’ is added to store necessary information, e.g.

    data () {
      return {
        profile: '',
        userdata: ''
      }
    },

And add following to ‘created’ method:

    currentComponent.userdata = result[0]

Also, the voting power and reputation returned by Steem js are not in the format you are familiar with, so some additional processes are needed. The computed properties in Vue.js are the perfect way to deal with this. In this case, two computed properties need to be added into Profile.vue:

    computed: {
      voting_power () {
        return parseFloat(this.userdata.voting_power) / 100
      },
      reputation () {
        return steem.formatter.reputation(this.userdata.reputation)
      }
    }

Now you can use these computed properties in the template:

    <div>VP: {{ voting_power }}</div>
    <div>Reputation: {{ reputation }}</div>


### Build and deployment

To build your Vue.js application, just type this command:

    npm run build

It will build your Vue.js project and generate a static website in ‘dist’ folder. The files in this folder can be seen by running commands:

    cd dist
    tree .

The output looks like:

![](https://cdn.steemitimages.com/DQmVfG2soHESxbB1TFKAmkP2G4t6HHEzPeZefkfHkMeh2gy/image.png)

The deployment is very straightforward: just copy all files and subfolders within ‘dist’ folder to your web server and then you will be able to access it.

## Curriculum

This is the second tutorial. More interesting topics will be covered in the following tutorials!

### Previous tutorials

[Part 1 - Build Steem blockchain application with Vue.js: installation and first demo](/@aafeng/part-1-build-steem-blockchain-application-using-vue-js-installation-and-first-demo)

## Proof of Work Done

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

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://aa-feng.github.io/
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 128 others
properties (23)
authoraafeng
permlinkpart-2-build-steem-blockchain-application-using-vue-js-components-computed-properties-and-build-deployment-process
categoryutopian-io
json_metadata{"community":"steempeak","app":"steempeak/1.7.2b","format":"markdown","tags":["utopian-io","tutorials","vuejs"],"links":["https://github.com/vuejs/vue","https://vuejstutorials.herokuapp.com","http://localhost:8081/#/”","http://localhost/”","/@aafeng/part-1-build-steem-blockchain-application-using-vue-js-installation-and-first-demo","https://github.com/aa-feng/VuejsTutorial/tree/t02","https://github.com/aa-feng/VuejsTutorial","https://aa-feng.github.io/"],"image":["https://cdn.steemitimages.com/DQmSnFb8dojCSjhpeXagQowTaqY11zrwfaxbXJsffKyYY6T/image.png","https://cdn.steemitimages.com/DQmW3bJjagEbmuABgRbNmTbTgqszCHBzk2LMpoyWPVmKJ5o/image.png","https://cdn.steemitimages.com/DQmVfG2soHESxbB1TFKAmkP2G4t6HHEzPeZefkfHkMeh2gy/image.png"],"users":["aafeng"]}
created2019-02-20 20:13:48
last_update2019-02-25 22:25:03
depth0
children7
last_payout2019-02-27 20:13:48
cashout_time1969-12-31 23:59:59
total_payout_value19.888 HBD
curator_payout_value6.489 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length6,667
author_reputation554,723,599,569,926
root_title"Part 2 - Build Steem blockchain application with Vue.js: components, computed properties and build/deployment process"
beneficiaries
0.
accountutopian.pay
weight500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id80,160,873
net_rshares52,645,254,523,558
author_curate_reward""
vote details (192)
@paulag ·
another great tutorial, nice one, thanks
properties (22)
authorpaulag
permlinkre-aafeng-part-2-build-steem-blockchain-application-using-vue-js-components-computed-properties-and-build-deployment-process-20190220t211222888z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2019-02-20 21:12:24
last_update2019-02-20 21:12:24
depth1
children1
last_payout2019-02-27 21:12:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length40
author_reputation274,264,287,951,003
root_title"Part 2 - Build Steem blockchain application with Vue.js: components, computed properties and build/deployment process"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id80,162,556
net_rshares0
@aafeng ·
Thanks.
properties (22)
authoraafeng
permlinkre-paulag-re-aafeng-part-2-build-steem-blockchain-application-using-vue-js-components-computed-properties-and-build-deployment-process-20190220t214615536z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2019-02-20 21:46:15
last_update2019-02-20 21:46:15
depth2
children0
last_payout2019-02-27 21:46:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length7
author_reputation554,723,599,569,926
root_title"Part 2 - Build Steem blockchain application with Vue.js: components, computed properties and build/deployment process"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id80,163,533
net_rshares0
@portugalcoin ·
$9.68
Thank you for your contribution @aafeng.
We've been reviewing your tutorial and suggest the following points below:

- In your previous tutorial I had suggested to put comments in your code. I repeat that it is very important to have comments in the code and that helps a lot less experienced users.

- We suggest you put more pictures to show the results of your work.

- The structure of your tutorial is good, in the next tutorial keep the tutorial well structured.

Looking forward to your upcoming tutorials.

Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/8/2-1-1-1-3-3-2-3-).

---- 
Need help? Chat with us on [Discord](https://discord.gg/uTyJkNm).

[[utopian-moderator]](https://join.utopian.io/)
👍  , , , , , , , , , , , , , , , , , , , ,
properties (23)
authorportugalcoin
permlinkre-aafeng-part-2-build-steem-blockchain-application-using-vue-js-components-computed-properties-and-build-deployment-process-20190220t225039207z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["aafeng"],"links":["https://join.utopian.io/guidelines","https://review.utopian.io/result/8/2-1-1-1-3-3-2-3-","https://discord.gg/uTyJkNm","https://join.utopian.io/"],"app":"steemit/0.1"}
created2019-02-20 22:50:39
last_update2019-02-20 22:50:39
depth1
children2
last_payout2019-02-27 22:50:39
cashout_time1969-12-31 23:59:59
total_payout_value7.350 HBD
curator_payout_value2.329 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length965
author_reputation599,460,267,670,390
root_title"Part 2 - Build Steem blockchain application with Vue.js: components, computed properties and build/deployment process"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id80,165,417
net_rshares18,460,412,810,958
author_curate_reward""
vote details (21)
@aafeng ·
Thanks you for reviewing my work. 

I did take your suggestions seriously and add comments to my code (e.g. in [Profile.vue](https://github.com/aa-feng/VuejsTutorial/blob/t02/src/components/Profile.vue)), didn't you see them? 
I will definitely add more pictures in next tutorial.
properties (22)
authoraafeng
permlinkre-portugalcoin-re-aafeng-part-2-build-steem-blockchain-application-using-vue-js-components-computed-properties-and-build-deployment-process-20190220t230500016z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https://github.com/aa-feng/VuejsTutorial/blob/t02/src/components/Profile.vue"],"app":"steemit/0.1"}
created2019-02-20 23:05:00
last_update2019-02-20 23:05:00
depth2
children0
last_payout2019-02-27 23:05:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length280
author_reputation554,723,599,569,926
root_title"Part 2 - Build Steem blockchain application with Vue.js: components, computed properties and build/deployment process"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id80,165,859
net_rshares0
@utopian-io ·
Thank you for your review, @portugalcoin! Keep up the good work!
properties (22)
authorutopian-io
permlinkre-re-aafeng-part-2-build-steem-blockchain-application-using-vue-js-components-computed-properties-and-build-deployment-process-20190220t225039207z-20190223t183016z
categoryutopian-io
json_metadata"{"app": "beem/0.20.17"}"
created2019-02-23 18:30:18
last_update2019-02-23 18:30:18
depth2
children0
last_payout2019-03-02 18:30:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length64
author_reputation152,955,367,999,756
root_title"Part 2 - Build Steem blockchain application with Vue.js: components, computed properties and build/deployment process"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id80,294,705
net_rshares0
@steem-ua ·
$0.03
#### Hi @aafeng!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
**Feel free to join our [@steem-ua Discord server](https://discord.gg/KpBNYGz)**
👍  
properties (23)
authorsteem-ua
permlinkre-part-2-build-steem-blockchain-application-using-vue-js-components-computed-properties-and-build-deployment-process-20190221t024705z
categoryutopian-io
json_metadata"{"app": "beem/0.20.18"}"
created2019-02-21 02:47:06
last_update2019-02-21 02:47:06
depth1
children0
last_payout2019-02-28 02:47:06
cashout_time1969-12-31 23:59:59
total_payout_value0.024 HBD
curator_payout_value0.007 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length285
author_reputation23,214,230,978,060
root_title"Part 2 - Build Steem blockchain application with Vue.js: components, computed properties and build/deployment process"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id80,172,525
net_rshares61,000,710,008
author_curate_reward""
vote details (1)
@utopian-io ·
Hey, @aafeng!

**Thanks for contributing on Utopian**.
We’re already looking forward to your next contribution!

**Get higher incentives and support Utopian.io!**
 Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via [SteemPlus](https://chrome.google.com/webstore/detail/steemplus/mjbkjgcplmaneajhcbegoffkedeankaj?hl=en) or [Steeditor](https://steeditor.app)).

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href='https://steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
properties (22)
authorutopian-io
permlinkre-part-2-build-steem-blockchain-application-using-vue-js-components-computed-properties-and-build-deployment-process-20190221t144256z
categoryutopian-io
json_metadata"{"app": "beem/0.20.17"}"
created2019-02-21 14:42:57
last_update2019-02-21 14:42:57
depth1
children0
last_payout2019-02-28 14:42:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length588
author_reputation152,955,367,999,756
root_title"Part 2 - Build Steem blockchain application with Vue.js: components, computed properties and build/deployment process"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id80,195,390
net_rshares0