Custom Component in Vue 2

Question

I created a custom component and registered it. But I get in the browser a warning, which I cannot process. In my opinion it is properly registered?

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

found in

--->

Main

import GISView from './components/GISView.vue';
import VueEvents from 'vue-events';

window.Vue = Vue;
Vue.use(VueEvents)

var App = window.App = new Vue({
  el: '#app',
  components: {
    'gisview': GISView
  },
    data() {
        return {
            eventData: {
                foo: 'baz'
            }
        }
    },
  methods: {
    init: function() {
      this.$events.$emit("test", this.eventData);
    }
  }
});

Component

<template>
    <div ref="map" id="map" class="google-map" style="position: relative; overflow: hidden;">
        <div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px;">
            <gisview></gisview>
        </div>
    </div>
</template>
<script>
    import GoogleMaps from '../mixins/GoogleMaps.js';

    export default {
        mixins: [GoogleMaps],

        mounted() {
            console.log("Mounted");
            this.$events.$on('test', eventData => console.log("Fired"));
        },

        data: function() {
            return {
                eventData: {
                    foo: 'baz'
                }
            }
        },

        methods: {
            initMap: function() {
                map = new google.maps.Map(this.$els.map, {
                    center: {lat: -34.397, lng: 150.644},
                    zoom: 8
                });
            }
        }
    }
</script>

Usage

<div class="wrapper wrapper-content animated fadeInRight">
        <div id="app">
            <div class="row">
                <div class="col-md-7">
                    <div class="ibox">
                        <div class="ibox-title">GIS</div>
                        <div class="ibox-content">
                            <gisview></gisview>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Eric Guan · Accepted Answer · 2017-05-10 15:26:53Z

4

I see 1-2 problems here.

You registered GISView to App.vue locally, meaning you can only use <gisview> inside App.vue's template. You can register GISView globally, like so, but i doubt you would want that.

Vue.component(GISView)

Is your second code example supposed to be GISView.vue? If it is, you're trying to use <gisview> within itself. Recursive components are a thing, but i don't think that's what you're going for here.

answered May 10, 2017 at 15:26

Eric Guan

16.1k10 gold badges53 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom Component in Vue 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related