Nuxt.jsでnem2-sdkを使ってみる

はじめに

ここでいうnem2-sdkとは、nem2-sdk-typescript-javascriptのことです。

環境

• Node.js v8.15.1
• Windows 10

インストール

以下のコマンドを入力したとき、いろいろ聞かれますが、とりあえず全部エンターキー押下で進みます。

npx create-nuxt-app nem2-sdk-nuxt

cd nem2-sdk-nuxt
npm run dev

http://localhost:3000にアクセスしましょう。

何かページが表示されました。

nem2-sdkの追加

ここに、nem2-sdkを追加していきます。

npm i nem2-sdk rxjs

執筆時点でのバージョンは以下のようになりました。

"nuxt": "^2.4.0"
"rxjs": "^6.4.0"

nuxt.config.jsに設定をしていきます。

nuxt.config.js

build: {
  extend(config, ctx) {
    config.node = {
      fs: 'empty',
      net: 'empty',
      tls: 'empty'
    }
  }
}

components/Account.vueを作成します。とりあえず何かしらのアカウントの情報を取得するように作りました。

components/Account.vue

<template>
  <div style="margin-top: 2rem;">
    <button @click="getAccountInfo" class="button--grey">getAccountInfo</button>
    <pre style="text-align: left; font-size: xx-small;">{{ accountInfo }}</pre>
  </div>
</template>
<script>
import { Address, AccountHttp, NetworkType } from 'nem2-sdk'

export default {
  name: 'Account',
  data() {
    return {
      accountInfo: null
    }
  },
  methods: {
    getAccountInfo() {
      const accountHttp = new AccountHttp('http://13.114.200.132:3000', NetworkType.MIJIN_TEST);
      const address = Address.createFromRawAddress('SCA7ZS-2B7DEE-BGU3TH-SILYHC-RUR32Y-YE55ZB-LYA2');
      accountHttp.getAccountInfo(address).subscribe((x) => {
        this.accountInfo = JSON.stringify(x, null, "\t");
      })
    }
  }
}
</script>
<style>
</style>

components/index.vueを編集します。

components/index.vue

<template>
  <section class="container">
    <div>
      <logo />
      <h1 class="title">
        nem2-sdk-nuxt
      </h1>
      <h2 class="subtitle">
        My spectacular Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green"
        >Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
        >GitHub</a>
      </div>
      <account />
    </div>
  </section>
</template>

<script>
import Logo from '~/components/Logo.vue'
import Account from '~/components/Account.vue'

export default {
  components: {
    Logo,
    Account
  }
}
</script>

これでページを再び見てみます。

ボタンが追加されました。

ボタンをクリックします。

nem2-sdkを使って情報を取得して表示することができました。