CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuex
Fortael
Fortael

Reputation: 322

Vue js not rendering a custom component

I'm using this - http://monterail.github.io/vue-multiselect/ Build a single js file with vue and that librarie, but the other code just in script tag. Component is registered. I put some data and it comes empty

enter image description here

It's just a code from "Getting started", nothing special. No one error in console, just empty node. The important thing: i'm using this inside another component with inline-template (upd: same even in root)

enter image description here

That's how file was created with webpack

window.Vue = require('vue');
window.Multiselect = require('vue-multiselect');

Then i just include compiled file and add script

<script>
    Vue.component('multiselect', Multiselect);
    new Vue({
        el: '#vue-app',
        data: {
            options: ['one', 'two'],
            model: ''
        },
        created: function () {},
        computed: {},
        methods: {}
    });
</script>

Upvotes: 4

Views: 1093

Answers (1)

thanksd
thanksd

Reputation: 55634

The 'vue-multiselect' module is meant to be imported like so:

import Multiselect from 'vue-multiselect'

By using import, you assign Multiselect to be the value of the default export of the module.

But, because you use require, you are assigning Multiselect to be the module object with a default property containing the component's configuration options. The default export is not being resolved, and the value you're trying to access is in Multiselect.default.

You should either use import, or access the default property when defining the 'multiselect' component:

Vue.component('multiselect', Multiselect.default);

Upvotes: 2

Related Questions