What3words Vue Components

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.

Bundler Support

Some bundlers require additional configuration to work with our components.

Vite

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"],
  },
});

Usage

What3Words Autosuggest Component

Installation

npm install @what3words/[email protected]

Usage

<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>

What3Words Map Component

Installation

npm install @what3words/[email protected]

Usage

<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>

What3Words Notes Component

Installation

npm install @what3words/[email protected]

Usage

<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>

Last Updated: 03/11/2025

Version: 5.0.5