Estoy usando Nuxt en un proyecto que tiene una entrada de búsqueda en el encabezado.

Lo implementé usando Mabpox Geocoder y funciona bien, pero en la carga de la primera página, la entrada de búsqueda aparece así

Cuando se ejecuta el gancho montado y el complemento carga el geocodificador, se ve bien

Quería usar la etiqueta <client-only> para colocar un marcador de posición hasta que se obtenga la búsqueda real, pero aparece este error:

500 no puede acceder a la propiedad "querySelector", geocoderContainer es nulo

Search.vue :

 <template> <div> <client-only> <div :id="geocoderID" @resultFound="resultFound"></div> </client-only> </div> </template> <script> export default { computed: { geocoderID() { return `mapbox-geocoder-${this.containerID}`; }, }, mounted() { this.$mapboxMaps.createGeocoder(this.geocoderID); }, } </script>

Mi complemento Mapbox.client.js :

 import "mapbox-gl/dist/mapbox-gl.css"; const mapboxgl = require("mapbox-gl"); import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder"; import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css"; export default function (context, inject) { inject("mapboxMaps", { createGeocoder }); mapboxgl.accessToken = <my-access-token> function createGeocoder(containerID) { // Only add the search box if there's none (avoid duplications of boxes) const geocoderContainer = document.getElementById(containerID); if (geocoderContainer.querySelector(".mapboxgl-ctrl-geocoder")) return; const geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken, enableEventLogging: false, mapboxgl: mapboxgl, }); geocoder.addTo(geocoderContainer); }

Cuando intento registrar el div al que quiero adjuntar la búsqueda usando lo siguiente

 mounted() { console.log(this.geocoderID); console.log(document.getElementById(this.geocoderID)) this.$mapboxMaps.createGeocoder(this.geocoderID); },

Registra esto

mapbox-geocoder-nav-búsqueda

indefinido