[Vuejs]-How do you integrate a Vue.js package (like vodal) into Laravel?

by

0👍

✅

In laravel first open terminal and install npm with the command npm install after that you can see a new folder in your project named as node_modules. all your packages code is inside this folder.

Now simply run your command for vodal like npm i -S vodal

now you can simply import this package into your app.js file as you did.

Run npm run watch for development mode which will import all vodal code from node_modules folder into your app.js file which is inside your public directory.

Update

I saw your repository and I downloaded it and edit some of your files. you were doing totally wrong.
I suggest you to learn vuejs first rather than getting deep into it.

the problem was you calling it in vue, not in the vue component so why you give the following code.

export default {
    components: {
        Vodal
    },
    data() {
        return {
            show: false
        }
    }
}

we do this in vue component, not in vue.
in data, we return only in vue component and the official documentation of vodal, they also give an example of using it in vue component.

and you not using it in vue component so simply did this in vue like below

const app = new Vue({
    el: '#app',
    data:{
        show: false
    }
});

So Now Your CSS.

so for including css. i simply import this in app.scss file like below.

@import "~vodal/common.css";
@import "~vodal/rotate.css";

now the final part and your biggest mistake is.
why you don’t include app.js file in welcome.blade file. All your code is written in app.js file and you are not including it. so i simply include it in welcome.blade file like below

<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">

after all, just run npm run watch

so now the main part you need to show:true for show modal. by default is false so it will not show you.
am making a click event for the show , so you understand how it’s all going to work. and ill share files with the link in the comment.

Leave a comment