[Vue warn]: неизвестный пользовательский элемент: <Googlemap> - PullRequest
Новая
       14

[Vue warn]: неизвестный пользовательский элемент: <Googlemap>

1 голос
/ 04 июня 2019

enter image description here

Я работаю над проектом nuxt и пытаюсь создать компонент карты с использованием карт Google и плагина https://www.npmjs.com/package/vue2-google-maps. Я установил плагин с помощью npm, и я начал работать, когда мой Страница index.vue выглядит так: 

<template>
   <div>


<br>
       <VideoCarousel/>
       <!-- <Googlemap/> -->
           <GmapMap :center="{lat:10, lng:10}" :zoom="7" map-type-id="terrain" style="width: 500px; height: 300px"/>
       <Panel/>
       <Four/>
       </div> 
</template>

<script>
import Three from '~/components/section3.vue'
import Four from '~/components/section4.vue'
import VuetifyLogo from '~/components/VuetifyLogo.vue'
import Menu from '~/components/menu.vue'
import VideoCarousel from '~/components/video-carousel.vue'
import Panel from '~/components/panel.vue'
import GoogleMap from '~/components/googleMap.vue'


export default {

  components: {
    Three,
    Four,
    Panel,
    VideoCarousel,
    GoogleMap
  }

}
</script>

<style>

</style>

Но когда я раскомментирую компонент, карта не генерируется. В devtools я вижу:

enter image description here

[Vue warn]: Unknown custom element: <Googlemap> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Что я делаю не так?

googleMap.vue 

<template>
  <GmapMap
  :center="{lat:10, lng:10}"
  :zoom="7"
  map-type-id="terrain"
  style="width: 500px; height: 300px"
>

</GmapMap>

</template>


<script>


export default {
     name:'GoogleMap'

}

</script>


<style>

</style>

Плагин в папке плагинов nuxt:

/ плагины / Google-maps.js: 

import Vue from "vue";
import * as VueGoogleMaps from "vue2-google-maps";

Vue.use(VueGoogleMaps, {
  load: {
    key: "YOUR_API_TOKEN",
    libraries: "places"
  }
});
...