vue-mapbox

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Create a plugin component | VueMapbox</title> <meta name="description" content="Combine powers of Mapbox GL JS and Vue.js"> <link rel="icon" href="/vue-mapbox/favicon.ico"> <link rel="preload" href="/vue-mapbox/assets/css/0.styles.622f01af.css" as="style"><link rel="preload" href="/vue-mapbox/assets/js/app.1613afe0.js" as="script"><link rel="preload" href="/vue-mapbox/assets/js/2.1a36c030.js" as="script"><link rel="preload" href="/vue-mapbox/assets/js/25.f1bf9c1c.js" as="script"><link rel="preload" href="/vue-mapbox/assets/js/4.79bc4f3c.js" as="script"><link rel="prefetch" href="/vue-mapbox/assets/js/10.496a25ae.js"><link rel="prefetch" href="/vue-mapbox/assets/js/11.c30d5454.js"><link rel="prefetch" href="/vue-mapbox/assets/js/12.43a2535b.js"><link rel="prefetch" href="/vue-mapbox/assets/js/13.0cb68667.js"><link rel="prefetch" href="/vue-mapbox/assets/js/14.3affa2b5.js"><link rel="prefetch" href="/vue-mapbox/assets/js/15.40b3c4ef.js"><link rel="prefetch" href="/vue-mapbox/assets/js/16.7de1d511.js"><link rel="prefetch" href="/vue-mapbox/assets/js/17.95d02626.js"><link rel="prefetch" href="/vue-mapbox/assets/js/18.449ed0f5.js"><link rel="prefetch" href="/vue-mapbox/assets/js/19.38617f97.js"><link rel="prefetch" href="/vue-mapbox/assets/js/20.f9650703.js"><link rel="prefetch" href="/vue-mapbox/assets/js/21.39c66c8d.js"><link rel="prefetch" href="/vue-mapbox/assets/js/22.276c6a9c.js"><link rel="prefetch" href="/vue-mapbox/assets/js/23.87f4c25b.js"><link rel="prefetch" href="/vue-mapbox/assets/js/24.9d297e6b.js"><link rel="prefetch" href="/vue-mapbox/assets/js/3.02aa2be5.js"><link rel="prefetch" href="/vue-mapbox/assets/js/5.d3d1578a.js"><link rel="prefetch" href="/vue-mapbox/assets/js/6.49edb5d4.js"><link rel="prefetch" href="/vue-mapbox/assets/js/7.e6ed37a7.js"><link rel="prefetch" href="/vue-mapbox/assets/js/8.3e4706bb.js"><link rel="prefetch" href="/vue-mapbox/assets/js/9.5e3d2dbf.js"> <link rel="stylesheet" href="/vue-mapbox/assets/css/0.styles.622f01af.css"> </head> <body> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-mapbox/" class="home-link router-link-active"> VueMapbox</a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> </div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-mapbox/guide/" class="nav-link">Guide</a></div><div class="nav-item"><a href="/vue-mapbox/api/" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/soal/vue-mapbox" target="_blank" rel="noopener noreferrer" class="nav-link external"> Github <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/soal/map-promisified" target="_blank" rel="noopener noreferrer" class="nav-link external"> map-promisified <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> </nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-mapbox/guide/" class="nav-link">Guide</a></div><div class="nav-item"><a href="/vue-mapbox/api/" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/soal/vue-mapbox" target="_blank" rel="noopener noreferrer" class="nav-link external"> Github <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/soal/map-promisified" target="_blank" rel="noopener noreferrer" class="nav-link external"> map-promisified <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> </nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0">Guide  <ul class="sidebar-links sidebar-group-items"><li><a href="/vue-mapbox/guide/" class="sidebar-link">Quickstart</a></li><li><a href="/vue-mapbox/guide/basemap.html" class="sidebar-link">Base map</a></li><li><a href="/vue-mapbox/guide/composition.html" class="sidebar-link">Composition</a></li><li><a href="/vue-mapbox/guide/controls.html" class="sidebar-link">Controls</a></li><li><a href="/vue-mapbox/guide/markers&popups.html" class="sidebar-link">Markers and popups</a></li><li><a href="/vue-mapbox/guide/layers&sources.html" class="sidebar-link">Layers and sources</a></li></ul></section></li><li><section class="sidebar-group depth-0">API  <ul class="sidebar-links sidebar-group-items"><li><a href="/vue-mapbox/api/" class="sidebar-link">GlMap</a></li><li><a href="/vue-mapbox/api/controls.html" class="sidebar-link">Controls</a></li><li><a href="/vue-mapbox/api/marker.html" class="sidebar-link">MapMarker</a></li><li><a href="/vue-mapbox/api/popup.html" class="sidebar-link">Popup</a></li><li><a href="/vue-mapbox/api/Layers/" class="sidebar-link">Layer commons</a></li><li><a href="/vue-mapbox/api/Layers/geojsonlayer.html" class="sidebar-link">GeojsonLayer</a></li><li><a href="/vue-mapbox/api/Layers/vectorlayer.html" class="sidebar-link">VectorLayer</a></li><li><a href="/vue-mapbox/api/Layers/rasterlayer.html" class="sidebar-link">RasterLayer</a></li><li><a href="/vue-mapbox/api/Layers/imagelayer.html" class="sidebar-link">ImageLayer</a></li><li><a href="/vue-mapbox/api/Layers/videolayer.html" class="sidebar-link">VideoLayer</a></li><li><a href="/vue-mapbox/api/Layers/canvaslayer.html" class="sidebar-link">CanvasLayer</a></li></ul></section></li><li><section class="sidebar-group depth-0">Plugin components  <ul class="sidebar-links sidebar-group-items"><li><a href="/vue-mapbox/plugin_components/" class="sidebar-link">Using plugin components</a></li><li><a href="/vue-mapbox/plugin_components/plugin_components_development.html" class="active sidebar-link">Create a plugin component</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-mapbox/plugin_components/plugin_components_development.html#overview" class="sidebar-link">Overview</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/plugin_components/plugin_components_development.html#basic-example-for-plugin-component" class="sidebar-link">Basic example for plugin component</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/plugin_components/plugin_components_development.html#vuemapbox-helpers" class="sidebar-link">VueMapbox helpers</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/plugin_components/plugin_components_development.html#creating-component-for-mapbox-gl-js-plugin" class="sidebar-link">Creating component for Mapbox GL JS plugin</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="content default"><h1 id="create-a-plugin-component"><a href="#create-a-plugin-component" aria-hidden="true" class="header-anchor">#</a> Create a plugin component</h1> <h2 id="overview"><a href="#overview" aria-hidden="true" class="header-anchor">#</a> Overview</h2> The purpose VueMapbox is to wrap up Mapbox Gl JS library. Any other functions are out of scope. However, there are some plugins for Mapbox Gl JS, that provides additional capabilities, and it where plugin components come into play. Plugin components are essentially just Vue components that utilize <code>mapbox</code> and <code>map</code> objects provided by basic <code>MglMap</code>. VueMapbox internally use dependency injection mechanism of Vue (<a href="https://vuejs.org/v2/api/#provide-inject" target="_blank" rel="noopener noreferrer">provide/inject<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> in Vue docs). When <code>MglMap</code> created, it waits for map loads and initializes then renders it's child components, and provide them <code>mapbox</code> (Mapbox GL JS library), <code>map</code> (initialized instance of the <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map" target="_blank" rel="noopener noreferrer">Map<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>) and <code>actions</code> (<a href="/vue-mapbox/api/#actions">promisified</a> Mapbox Map methods). Inject these objects in your component, and you can add to map features you need. The basic idea is to keep the declarative style of Vue, so it's good to add for example additional controls or layer types to map as a component. It's a right place to wrap Mapbox Gl JS plugins, but it can be used for various purpose. <h2 id="basic-example-for-plugin-component"><a href="#basic-example-for-plugin-component" aria-hidden="true" class="header-anchor">#</a> Basic example for plugin component</h2> App template <div class="language-vue extra-class"><pre class="language-vue"><code><template> <MglMap :accessToken="accessToken" :mapStyle="mapStyle"> <MyPluginComponent /> </MglMap> </template> <script> import Mapbox from "mapbox-gl"; import { MglMap } from "vue-mapbox"; export default { components: { MglMap }, data() { return { accessToken: ACCESS_TOKEN, mapStyle: MAP_STYLE }; } }; </script> </code></pre></div>Plugin comonent <div class="language-vue extra-class"><pre class="language-vue"><code><template> <button @click="fly">Fly!</button> <div>Map center is: Lng={{ center.lng }}, Lat={{ center.lat }}</div> </template> <script> import Mapbox from "mapbox-gl"; import { MglMap } from "vue-mapbox"; export default { name: "MyPluginComponent" inject: ["mapbox", "map", "actions"], data() { return { center: null }; }, created() { this.center = this.map.getCenter(); }, methods: { async fly() { const flyResult = await this.actions.flyTo({ center: [10, 10] }); this.center = flyResult.center; } } }; </script> </code></pre></div><h2 id="vuemapbox-helpers"><a href="#vuemapbox-helpers" aria-hidden="true" class="header-anchor">#</a> VueMapbox helpers experimental</h2> <div class="danger custom-block">Experimental Helpers are experimenatal feature and will change in future, but we will try keep backward compatibility for a long time and provide deprecation warnings. For now they just mixins that used in VueMapbox internal implementation.</div> Beside providing base objects, VueMapbox give some useful helper mixins, that can be used in plugin components. You can access to them via <code>$helpers</code> named export: <div class="language-js extra-class"><pre class="language-js"><code>import { $helpers } from "vue-mapbox"; const { withEvents, withSelfEvents, asControl, asLayer } = $helpers; </code></pre></div><h3 id="withevents"><a href="#withevents" aria-hidden="true" class="header-anchor">#</a> <code>withEvents</code></h3> <a href="https://github.com/soal/vue-mapbox/blob/master/src/lib/withEvents.js" target="_blank" rel="noopener noreferrer">Source<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>. Provides <code>$_emitEvent</code> and <code>$_emitMapEvent</code> methods to emit events in VueMapbox style. <h3 id="withselfevents"><a href="#withselfevents" aria-hidden="true" class="header-anchor">#</a> <code>withSelfEvents</code></h3> <a href="https://github.com/soal/vue-mapbox/blob/master/src/components/UI/withSelfEvents.js" target="_blank" rel="noopener noreferrer">Source<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> Provides <code>$_bindSelfEvents</code>, <code>$_unbindSelfEvents</code> and <code>$_emitSelfEvent</code>. They can be used to bind events to Mapbox GL JS objects that emit self events instead of <code>Map</code> object like controls, markers and popups. <h3 id="ascontrol"><a href="#ascontrol" aria-hidden="true" class="header-anchor">#</a> <code>asControl</code></h3> <a href="https://github.com/soal/vue-mapbox/blob/master/src/components/UI/controls/controlMixin.js" target="_blank" rel="noopener noreferrer">Source<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>. Provides backbone for Map controls (like ) <h3 id="aslayer"><a href="#aslayer" aria-hidden="true" class="header-anchor">#</a> <code>asLayer</code></h3> <a href="https://github.com/soal/vue-mapbox/blob/master/src/components/layer/layerMixin.js" target="_blank" rel="noopener noreferrer">Source<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>. Provides backbone for Map layer. See also <a href="/api/layers">layers API doc</a> <h2 id="creating-component-for-mapbox-gl-js-plugin"><a href="#creating-component-for-mapbox-gl-js-plugin" aria-hidden="true" class="header-anchor">#</a> Creating component for Mapbox GL JS plugin</h2> Example below can give you an idea how to create component for Mapbox GL JS plugin. <a href="https://github.com/soal/vue-mapbox-geocoder" target="_blank" rel="noopener noreferrer">VueMaboxGeocoder<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> — wrapper for <a href="https://github.com/mapbox/mapbox-gl-geocoder" target="_blank" rel="noopener noreferrer">mapbox-gl-geocoder<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>: <div class="language-js extra-class"><pre class="language-js"><code>// First, there is no separate HTML to render, so we don't need template and SFC, so it's just JS file import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder"; import { $helpers } from "vue-mapbox"; // Get $helpers from VueMapbox // Define list of mapbox-gl-geocoder events const geocoderEvents = { clear: "clear", loading: "loading", results: "results", result: "result", error: "error" }; export default { name: "GeocoderControl", mixins: [$helpers.asControl], // MapboxGeocoder is a control, so we use mixin inject: ["mapbox", "map"], // Here we inject objects provided by MglMap props: { // MapboxGeocoder requires access token accessToken: { type: String, required: true }, input: { type: String, default: null }, proximity: { type: Object, default: null } // ...here goes other props... }, data() { return { initial: true }; }, // Here we watch for props and and apply changes to MapboxGeocoder if needed watch: { input: { handler(next, prev) { if (this.control && next !== prev) { this.control.setInput(next); } }, immediate: true }, proximity(next, prev) { if (this.control && next !== prev) { this.control.setProximity(next); } } }, created() { this.control = null; // Here we will store MapboxGeocoder instance. We don't want Vue reactivity system mess with it, so we store it non-reactive if (this.accessToken && !this.mapbox.accessToken) { this.mapbox.accessToken = this.accessToken; } this.control = new MapboxGeocoder(this.$props); // Creating MapboxGeocoder instance and pass props as options to it this.control.on("results", this.$_updateInput); // We need to update synchronized prop "input" when user enters some query to search field // Now we can add control to the map this.$_deferredMount(); }, beforeDestroy() { this.control.off("results", this.$_updateInput); // Also, control will be removed from map in beforeDestroy() lifecycle hook in `asControl` mixin }, methods: { $_deferredMount() { // Because this component placed in MglMap sub-tree, map already initialized and injected above this.map.addControl(this.control); if (this.input) { // Set input in MapboxGeocoder if there is default data this.control.setInput(this.input); } // Emit added event. `$_emitEvent` method is came from `asControl` mixin this.$_emitEvent("added", { geocoder: this.control }); this.$_bindSelfEvents(Object.keys(geocoderEvents)); // Bin events to emit them as Vue events this.initial = false; // Initialization done }, $_bindSelfEvents(events) { // $_bindSelfEvents is provided by `asControl` mixin. but we need to replace it because MapboxGeocoder do not follow Mapbox Gl JS events schema and we need custom processing for them const vm = this; // Here we use this.$listeners to subscribe only on events that user listens on component Object.keys(this.$listeners).forEach(eventName => { if (events.includes(eventName)) { this.control.on(eventName, vm.$_emitControlEvent.bind(vm, eventName)); } }); }, // Process event to line up with VueMapbox events format $_emitControlEvent(eventName, eventData) { return this.$_emitSelfEvent({ type: eventName }, eventData); }, $_updateInput(results) { if (!this.initial) { const input = results.query ? results.query.join("") : ""; this.$emit("update:input", input); // update synchormized prop "input" } } //...here goes other public methods } }; </code></pre></div></div> <footer class="page-edit"> </footer> <div class="page-nav"> ← <a href="/vue-mapbox/plugin_components/" class="prev router-link-active"> Using plugin components </a> </div> </main></div><div class="global-ui"></div></div> <script src="/vue-mapbox/assets/js/app.1613afe0.js" defer></script><script src="/vue-mapbox/assets/js/2.1a36c030.js" defer></script><script src="/vue-mapbox/assets/js/25.f1bf9c1c.js" defer></script><script src="/vue-mapbox/assets/js/4.79bc4f3c.js" defer></script> </body> </html>