スクリプトタグ版

yubinbango.js

CDN のスクリプトタグ版。フォームフィールドに特定のクラス名（p-region, p-locality 等）を付与することで DOM を直接書き換えます。 Vue のリアクティビティと競合するため、setTimeout で同期する回避策が必要です。

⚠️ 注意: このアプローチは Vue の v-model と競合します。 yubinbango.js が DOM を直接書き換えても Vue は変更を検知できないため、setTimeout で DOM の値を手動で読み取って同期する必要があります。実務では yubinbango-core を推奨します。
〒

7桁入力後、DOM 読み取りで自動入力します（約300ms）

自動入力エリア (DOM → Vue 同期)

実装コード 
// 1. useHead でスクリプトタグを追加
useHead({
  script: [{ src: 'https://yubinbango.github.io/yubinbango/asset/js/yubinbango.js' }]
})

// 2. フォームに特定のクラス名を付与 (yubinbango.js が認識する)
// <form class="h-adr">
//   <span class="p-country-name" hidden>Japan</span>
//   <input class="p-postal-code" />  ← zip 入力フィールド
//   <input class="p-region"      />  ← 都道府県 (DOM 直書き換え)
//   <input class="p-locality"    />  ← 市区町村 (DOM 直書き換え)
//   <input class="p-street-address" />
// </form>

// 3. yubinbango.js は DOM を直接書き換えるので Vue は気づかない
//    → setTimeout で DOM から Vue state に手動同期
function onZipInput() {
  setTimeout(() => {
    form.pref    = prefRef.value?.value ?? ''
    form.city    = cityRef.value?.value ?? ''
    form.address = addrRef.value?.value ?? ''
  }, 300) // yubinbango.js が処理を終えるまで待つ
}

// ⚠️ v-model ではなく :value + @input を使う
// <input ref="prefRef" :value="form.pref" @input="form.pref = $event.target.value" />
  • ⚠️ Vue のリアクティビティと競合する DOM 操作
  • ⚠️ setTimeout によるタイミング依存の同期
  • ⚠️ v-model が使えず :value + @input パターンが必要
  • ❌ Nuxt 3 / Vue では非推奨 — yubinbango-core を使うべき