Registry / productivity / vue-daum-postcode

vue-daum-postcode

JSON →
library1.2.2jsnpmunverified

A Vue 3 component for the Daum (Kakao) Postcode service, which provides Korean address search functionality. Current stable version is 1.2.2, released with a monthly cadence. It wraps the Daum postcode script API into a reusable Vue component. Key differentiators: lightweight, zero dependencies, TypeScript support, and reactive events. Alternatives require manual script injection or are for Vue 2.

productivity
npm install vue-daum-postcode
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · VUE-DAUM-POSTCODE
V
vue-daum-postcode
productivityjavascriptv1.2.2
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

DaumPostcode
✓ import DaumPostcode from 'vue-daum-postcode'
✗ const DaumPostcode = require('vue-daum-postcode')
Default export only; CommonJS require not supported in ESM-first bundle.
DaumPostcode
✓ import DaumPostcode from 'vue-daum-postcode'
✗ import { DaumPostcode } from 'vue-daum-postcode'
Named import fails; must use default import.
type DaumPostcodeProps
✓ import type { DaumPostcodeProps } from 'vue-daum-postcode'
TypeScript types are exported; use 'import type' for tree-shaking.

Shows how to integrate the DaumPostcode component to fetch Korean addresses using the on-complete callback.

<script setup lang="ts"> import { ref } from 'vue' import DaumPostcode from 'vue-daum-postcode' const address = ref('') const postcode = ref('') const handleComplete = (data: any) => { address.value = data.address postcode.value = data.zonecode } </script> <template> <DaumPostcode :on-complete="handleComplete" style="width: 400px; height: 400px;" /> <p>Postcode: {{ postcode }}</p> <p>Address: {{ address }}</p> </template>
Debug
Known issues
gotchaComponent renders an empty iframe when closed; ensure parent container has dimensions.
fix
Set explicit width and height on component container.
affects: >=1.0.0
gotchaThe on-complete prop does not emit Vue events; it is a direct callback prop.
fix
Use @on-complete="handler" in template (lowercase event) or pass as prop.
affects: >=1.0.0
gotchaComponent loads Daum script dynamically; ensure it is not blocked by CSP or ad blockers.
fix
Add script-src 'self' https://t1.daumcdn.net to CSP.
affects: >=1.0.0
Errors
Common errors & fixes
[Vue warn]: Failed to resolve component: DaumPostcode
Component not registered globally or locally.
fix
Register DaumPostcode in components option or install globally via app.component('DaumPostcode', DaumPostcode).
TypeError: Cannot read properties of undefined (reading 'address')
on-complete callback expects a data object; if not invoked, data is undefined.
fix
Handle case where user closes the popup without selecting an address.
Upgrade
Version history
1.2.2latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
32 hits · last 30 days
node
28
Amazon
1
OpenAI (training)
1
Resources
githubgit://github.com/wan2land/vue-daum-postcode ↗
packagevue-daum-postcode ↗
homepagehttps://github.com/wan2land/vue-daum-postcode#readme ↗
vue-daum-postcode — npm install vue-daum-postcode · libregistry