概要
- 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 から使う場合は型定義なども別途必要