Registering a Vue JS component
Question
I have a JS page with Vue Js instance, in which I am importing a component. However I am receiving the following error:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
The name attribute is correct in the export object of the component I am importing so I am wondering what is causing this error.
Component:
<template>
<GoogleMapLoader :mapConfig="mapConfig" apiKey="YOUR_API_KEY">
<template slot-scope="{ google, map }">
<GoogleMapMarker
v-for="marker in markers"
:key="marker.id"
:marker="marker"
:google="google"
:map="map"
/>
<GoogleMapLine
v-for="line in lines"
:key="line.id"
:path.sync="line.path"
:google="google"
:map="map"
/>
</template>
</GoogleMapLoader>
</template>
<script>
import GoogleMapLoader from "./GoogleMapLoader";
import GoogleMapMarker from "./GoogleMapMarker";
import GoogleMapLine from "./GoogleMapLine";
import { mapSettings } from "./mapSettings";
export default {
name: "TravelMap",
components: {
GoogleMapLoader,
GoogleMapMarker,
GoogleMapLine
},
data() {
return {
markers: [
{ id: "here", position: { lat: 32.800359, lng: -117.021605 } },
{ id: "there", position: { lat: -51.628489, lng: -72.545818 } }
],
lines: [{
id: "1",
path: [{ lat: 32.800359, lng: -117.021605 }, { lat: -51.628489, lng: -72.545818 }]
}]
};
},
computed: {
mapConfig() {
return {
...mapSettings,
center: this.mapCenter
};
},
mapCenter() {
return this.markers[1].position;
}
}
};
</script>
import Vue from "vue";
Vue.config.productionTip = false;
import TravelMap from "./TravelMap";
new Vue({
el: "#App",
components: { TravelMap }
});
Here is also a sandbox link with the the entire code sample: https://codesandbox.io/s/yqqwwz0z1x
2 answers
solution1
0 2019-04-05 08:59:48
As stated in one of the comments, captial words are not allowed in HTML.
Your first option would be to just change your TravelMap tag in index.html to <travel-map class="travel-map" />
Another option would be to change the Vue Instance creation.
If you change the body content from your index.html file to
<body> <div id="app" /> <!-- built files will be auto injected --> </body>
and create your Vue instace like this
new Vue({ el: "#app", template: "<App/>", components: { App } });
the App.vue will be your application entry, and inside the App's template you will be able to use the same name as used to import/register the component.
Link to the updated sandbox: https://codesandbox.io/s/50vo260nqp
solution2
0 ACCPTED 2019-04-06 06:50:17
I ended up changing it to load the component using Laravel instead:
Vue.component('google-map', require('../GoogleMaps/GoogleMap').default);
new Vue({
el: "#App"
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.