Vue js not rendering a custom component

Question

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

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)

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>

Not enough context. Please show more of the code for the component — thanksd
– thanksd, Commented Jun 6, 2017 at 19:34
try Vue.component('multiselect', Multiselect.default) instead — thanksd
– thanksd, Commented Jun 6, 2017 at 19:52
@thanksd You're my hero! Could you make it as an answer for topic? — Fortael
– Fortael, Commented Jun 6, 2017 at 20:05

thanksd · Accepted Answer · 2017-06-06 20:18:02Z

2

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);

edited Jun 6, 2017 at 20:18

answered Jun 6, 2017 at 20:09

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

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

Collectives™ on Stack Overflow

Vue js not rendering a custom component

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