Nuxt.js で npm モジュールをプラグイン化するサンプル(IMI コンポーネントツール)

概要

• Nuxt.js で npm モジュールをプラグイン化して使う例をメモとして残す
• ついでに最近リリースされた IMI コンポーネントツールを使ってみる

手順

npm モジュール追加

yarn add https://info.gbiz.go.jp/tools/imi_tools/resource/imi-enrichment-contact/imi-enrichment-contact-1.0.0.tgz

プラグイン作成

• plugins 以下に javascript ファイルを作成
• モジュールを import してコンテキストと Vue コンポーネントにインジェクトする

plugins/contact.js

import contact from 'imi-enrichment-contact';

export default (ctx, inject) => {
  ctx.$contact = contact;
  inject('contact', contact);
};

nuxt.config.js を修正してロード

nuxt.config.js

 plugins: ['@/plugins/contact'],

.vue ファイルから使用する

xxx.vue

  asyncData({ $contact }) {
    console.log($contact('117'));
  },
  methods: {
    normalize() {
      this.normalized = JSON.stringify(this.$contact(this.tel), null, 4);
    }
  }

動作サンプル

• https://yoshihiro-hirose.github.io/nuxt-vuetify-sample/samples/contact
• https://github.com/Yoshihiro-Hirose/nuxt-vuetify-sample

補足

• IMI コンポーネントツールはブラウザで動かないものもある(住所とか)
• プラグインを TypeScript から使う場合は型定義なども別途必要

参考リンク

• Nuxt.js プラグイン
  • https://ja.nuxtjs.org/guide/plugins/
• IMI コンポーネントツール
  • https://info.gbiz.go.jp/tools/imi_tools/index.html
  • https://blog.geolonia.com/2020/05/29/imi-tools.html
  • https://qiita.com/uedayou/items/4c9d30fc031a9bf6762e