How to use a vue-related npm package in laravel app

What error do you get?

Dou you have sortable loaded ? sortable

Load this before draggable & tell me your result.

Hi @tomasz.r and @hendranucleo ! Thanks a lot for the reply :D

The first answer is:

Uncaught SyntaxError: Unexpected identifier

It refers to the line import draggable from 'vuedraggable' and it completely makes sense, as that should be compiled. My fault.

On the other hand, sortablejs is being loaded, as it is a dependency of vuedraggable.

I've tried this new approach, yet things don't work:

app.js

var draggable = require('vuedraggable');

Vue.component('draggable', require('./components/MyDraggable.vue'));

MyDraggable.vue

<script>

    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable
        }
    }

</script>

My blade view:

<div id="app">

    <draggable :list="list" @start="drag=true" @end="drag=false">

        <div v-for="element in list">{{element.name}}</div>

    </draggable>

</div>

<script>

    new Vue({
        el: "#app",
        data: {
            list: [
                { name: "Some element", id: 1 },
                { name: "Some other element", id: 2 },
                { name: "An extra element", id: 3 },
                { name: "Final element", id: 4 }
            ]
        }
    });

</script>

And now the error is: Failed to mount component: template or render function not defined. So I added a template to the MyDraggable.vue like this:

<template>
    <nav class="panel" id="movements">
        <slot></slot>
    </nav>
</template>
<script>

    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable
        }
    }

</script>

This way Vue.js doesn't complain, the list gets rendered in the browser, and everything seems to work, but the list is not sortable/draggable, which takes me back to the beginning :P

Any ideas? Thanks a lot!

Hey,

I recently found this by googling the exact same problem. I fixed it the following way:

Install npm package and reference as component:

Install vuedraggable and add it to package.json:

npm install vuedraggable --save

Then, in your app.js or bootstrap.js or whereever you require your vue, do the same for vuedraggable:

window.draggable = require('vuedraggable');

Now you can reference the "draggable" variable as a component within your Vue instance, like so:

new Vue({
    el: '#app',
    components: {
        draggable,
    },
    data: {
        fields: [{name: "test1"}, {name: "test2"}],
    },
});

which would work with the following HTML markup:

<div id="app">
    <draggable :list="fields" class="dragArea">
        <div v-for="element in fields">@{{ element.name }}</div>
    </draggable>
</div>

Hope this helps somebody :-)

thanks!!

Thanks! :D