vue-native-contact-picker

Vue wrapper for ContactPicker API

This feature require user to accept permission and the website must run in secure environment (https)

Install

`npm i vue-native-contact-picker`

Import and register component

Global

import { createApp } from 'vue'
import App from './App.vue'

import { ContactPicker } from 'vue-native-contact-picker'

const app = createApp(App)
app.component('ContactPicker', ContactPicker)

Local

<script setup lang="ts">
import { ContactPicker } from 'vue-native-contact-picker'

const handlePicked = (contacts: any) => {
  console.log(contacts)
}

const handleErrors = (error: string) => {
  console.error(error)
}
</script>

<template>
  <ContactPicker
    :props-select="['name', 'email', 'tel', 'address', 'icon']"
    :multiple="true"
    @errors="handleErrors"
    @picked="handlePicked"
  />
</template>

Browser Support

Specification

Browser	Version
Chrome Mobile	120

Props

Name	Value	Default
propsSelect	Array of name, email, tel, address, icon	['name', 'email', 'tel', 'address', 'icon']
multiple	boolean	true

Events

Name	Value
picked	Object { name: Array of string, email: Array of string, tel: Array of string, address: Array of string, icon: Array of Blob }
errors	Object Errors