Vue.jsアプリケーションでは、次の手順でInputManJSのコンポーネントを使用することができます。

InputManJS製品に含まれる下記のフォルダを、Vue.jsアプリケーションプロジェクトにコピーします。

samples¥vue¥inputmanjs¥

index.htmlファイル（またはInputManJSを使用するページ）で、下記のファイルを読み込みます。Vue.jsのバージョン番号やURLは適宜変更してください。

<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<!-- InputManJS -->
<link rel="stylesheet" href="inputmanjs/gc.inputman-js.1.0.css" />
<script src="inputmanjs/gc.inputman-js.ja.1.0.js"></script>
<script src="inputmanjs/gc.inputman.plugin.vue.js"></script>

index.htmlファイルで、InputManJSのマスクコンポーネントを追加します。

<div id="app">
　<gc-mask v-model="maskValue" :format-pattern="'〒¥¥D{3}-¥¥D{4}'"></gc-mask>
　値: {{maskValue}}
</div>

JavaScriptコードのVue作成処理で、値を保持するための変数をdataに追加します。

var app = new Vue({
　el: '#app',
　data: {
　　maskValue: '1234567',
　},
});

index.htmlファイルを開いてアプリケーションを実行します。