The what3words vue components package extends the JS API as a framework wrapper for the custom elements found in the @what3words/javascript-components package. This is exclusively for use in Vue applications. Depending on your use-case, you can alternatively utilise our native JS custom elements (@what3words/javascript-components) as these should work given the specification's current browser compatibility and framework support.
This library was generated with Vue version 3.
Some bundlers require additional configuration to work with our components.
When using vite, make sure to exclude @what3words/vue-components from the dependency optimization using the optimizeDeps.exclude option in your vite.config.[js,ts] file
import { defineConfig } from "vite";
export default defineConfig({
...
optimizeDeps: {
exclude: ["@what3words/vue-components"],
},
});npm install @what3words/vue-components@5.0.3<template>
<What3wordsAutosuggest :="$props">
<input
id="search-input"
type="text"
placeholder="Find your address"
autocomplete="off"
/>
</What3wordsAutosuggest>
</template>
<script lang="ts">
import {
What3wordsAutosuggest,
} from "@what3words/vue-components";
export default {
name: "Autosuggest",
components: {
What3wordsAutosuggest,
},
props: {
callback: String,
api_key: String,
headers: String,
base_url: String,
name: String,
initial_value: String,
variant: String,
typeahead_delay: Number,
allow_invalid: Boolean,
icon_visible: Boolean,
icon_size: Number,
icon_color: String,
language: String,
n_focus_results: Number,
clip_to_country: String,
clip_to_bounding_box: String,
clip_to_circle: String,
clip_to_polygon: String,
return_coordinates: Boolean,
onValue_changed: Function,
onValue_valid: Function,
onValue_invalid: Function,
onDeselected_suggestion: Function,
onSelected_suggestion: Function,
onSuggestions_changed: Function,
onCoordinates_changed: Function,
on__hover: Function,
on__focus: Function,
on__blur: Function,
on__error: Function,
},
};
</script>
<style>
</style>npm install @what3words/vue-components@5.0.3<template>
<What3wordsMap :="$props">
<div slot="map" id="map-container" />
<div slot="search-control" id="search-container">
<What3wordsAutosuggest>
<input
id="search-input"
type="text"
placeholder="Find your address"
autocomplete="off"
/>
</What3wordsAutosuggest>
</div>
<div slot="current-location-control" id="current-location-container">
<button>Current Location</button>
</div>
</What3wordsMap>
</template>
<script lang="ts">
import {
What3wordsAutosuggest,
What3wordsMap,
} from "@what3words/vue-components";
export default {
name: "Map",
components: {
What3wordsAutosuggest,
What3wordsMap,
},
props: {
id: String,
api_key: String,
api_version: String,
base_url: String,
current_location: Boolean,
current_location_control_position: Number,
disable_default_ui: Boolean,
fullscreen_control: Boolean,
fullscreen_control_position: Number,
headers: String,
/**
* See https://developers.google.com/maps/faq#languagesupport
*/
language: String,
lat: Number,
libraries: [String],
lng: Number,
map_api_key: String,
map_type_control: Boolean,
map_type_control_position: Number,
map_type_id: String,
marker_icon: String,
onCoordinates_changed: Function,
onSelected_square: Function,
on__error: Function,
on__load: Function,
region: String,
rotate_control: Boolean,
rotate_control_position: Number,
scale_control: Boolean,
search_control_position: Number,
selected_zoom: Number,
street_view_control: Boolean,
street_view_control_position: Number,
tilt: Number,
version: String,
watch_location: Boolean,
words: String,
zoom: Number,
zoom_control: Boolean,
zoom_control_position: Number,
},
};
</script>
<style>
html,
body {
margin: 0px;
height: 100%;
}
[slot="map"] {
width: 100vw;
height: 100vh;
}
[slot="search-control"] {
margin: 10px 0 0 10px;
}
#search-input {
width: 300px;
}
[slot="current-location-control"] {
margin: 0 10px 10px 0;
}
</style>npm install @what3words/vue-components@5.0.3<template>
<What3wordsNotes :="$props">
<label slot="label" for="delivery-notes">
Delivery Notes
</label>
<textarea
slot="input"
name="delivery-notes"
placeholder="Type delivery instructions with your what3words address"
></textarea>
</What3wordsNotes>
</template>
<script lang="ts">
import {
What3wordsNotes,
} from "@what3words/vue-components";
export default {
name: "Notes",
components: {
What3wordsNotes,
},
props: {
addressFormat: String,
apiKey: String,
apiVersion: String,
baseUrl: String,
callback: String,
clipToBoundingBox: String,
clipToCircle: String,
clipToCountry: String,
clipToPolygon: String,
headers: String,
language: String,
nFocusResults: Number,
searchFocus: Number,
showHintsTooltip: Boolean,
typeaheadDelay: String,
},
};
</script>
<style>
</style>