Vue Barangay Search

A Vue 3 component for searching Philippine Barangays using the api.gis.ph service.

Installation

Install via your preferred package manager:

# Using bun (recommended)
bun add vue-barangay-search

# Using npm
npm install vue-barangay-search

# Using pnpm
pnpm add vue-barangay-search

Usage

<script setup>
import { ref } from 'vue'
import { BarangaySearch } from 'vue-barangay-search'
import 'vue-barangay-search/dist/vue-barangay-search.css'

const selectedBarangay = ref(null)
const accessToken = 'YOUR_GIS_PH_API_KEY' // Get one at https://gis.ph
</script>

<template>
  <BarangaySearch
    v-model="selectedBarangay"
    :accessToken="accessToken"
    placeholder="Search for a barangay..."
    @select="(b) => console.log('Selected:', b)"
  />
</template>

Props

Prop	Type	Default	Description
accessToken	String	undefined	Required. Your API Key or Token from gis.ph.
municipality	String	undefined	Optional: filter results to a specific municipality.
placeholder	String	Search for a barangay...	Input placeholder text.
modelValue	Object	undefined	v-model binding for the selected barangay.

Events

Event	Payload	Description
update:modelValue	Object	Emitted when a selection is made.
select	Object	Emitted with the full barangay object on selection.
error	Error	Emitted when an API or network error occurs.