iosononando
855
6
Vue

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

Posted 2 years ago by iosononando

Hi, everyone! As many people here, I'm fairly new to Vue. I've watched all of the Vue 2.0 videos here at Laracasts and done all my homework (with a bit of success), jet I'm struggling to find a solution to what looks to be a very simple problem: how do I use in a Laravel app a vue-related npm package?

As an example, I've been trying to use Vue.Draggable, and following their instructions, I've done the following:

Installed the package:

npm install vuedraggable --save

Then, in my app.js file I've required vuedraggable:

var draggable = require('vuedraggable');

Finally, in my blade view I've inserted their sample code:

<div id="app">

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

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

    </draggable>

</div>

<script>

    Vue.component('draggable', {
        import draggable from 'vuedraggable',
        export default {
            components: {
                draggable,
                }
        }
    });

    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 this clearly doesn't work. Any help would be hugely appreciated! Thanks!

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.