Vue.draggable: Use with Nuxt?

[cliqer]

Created a plugin:

vuedraggable.js
import Vue from 'vue'
import draggable from 'vuedraggable'

Vue.use(draggable)

imported in nuxt.config.js

    plugins: [
        { src: '~plugins/vuedraggable.js', ssr: false }
    ]

and try to use it like:

<template lang="pug">
.container
    div
        h2 Draggable Wrapper
        draggable(v-model='exampleList')
            div(v-for='text in exampleList', :key='text')
</template>
<script>
import draggable from 'vuedraggable'
export default {
    components: {
        draggable
    },
    layout: 'empty',
    data() {
        return {
            exampleList: [
                'Item 1',
                'Item 2',
                'Item 3',
                'Item 4',
                'Item 5'
            ]
        }
    },
}

What am I missing here?

[PlainBane]

Hi,
replace your plugin code with this:

import Draggable from 'vuedraggable';
import Vue from 'vue';
Vue.component('draggable', Draggable);

And remove import draggable from 'vuedraggable' from your .vue file.

[David-Desmaisons]

As stated by @PlainBane , Vue.use(draggable) won't work use Vue.component('draggable', Draggable); instead

[ann61wang]

When I introduce the following code into vueDraggable. Js, I still cannot globally introduce vueDraggable

import Draggable from 'vuedraggable'
import Vue from 'vue'
Vue.component('draggable', Draggable)

[tvld]

I wonder if the ssr: false is really a good idea?... I needed to use this:

 // using index.js in /plugins/draggable
 plugins: [
        { src: '@/plugins/draggable'} 
    ]

To avoid getting:
The client-side rendered virtual DOM tree is not matching server-rendered

[Frederick-88]

Thanks! this help me save my time a lot =)