iosononando
195
6
Vue

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

Posted 1 year 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.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.