Can tell somebody how to add Slick vue component in Laravel, step by step?

Question

I have an issue with Laravel and Vue.js.

I can't understand how to add vue-slick to my blade in Laravel 5.

Read how to use it here (why someone thinks that is good documentation)

My steps:

• Install the package by NPM (npm install vue-slick)
• Add new component Vue and now, I don't know what to do.

Where do I add code of script? To app.js or to example.vue?

Big thanks.

Answer 1

I don't remember the exact setup when installing Laravel 5 (although a quick look at Github gave me some memories), but assuming the ExampleComponent.vue component is correctly imported into app.js, you should be able to use it in any blade file like this <example-component></example-component>, and then the easiest way to use vue-slick would be to edit the ExampleComponent.vue file like this:

<template>
    <div class="container">
        <slick ref="slick" class="gallery-container" :options="slickOptions">
            <div class="gallery-item" v-for="picture in pictures" :key="picture.key">
                <img :src="picture.src" class="img-fluid" alt="option image">
            </div>
        </slick>
    </div>
</template>

<script>
    import Slick from 'vue-slick';
    export default {
        components: {
           Slick
        },
        data() {
            return {
                slickOptions: {
                    slidesToShow: 3,
                    slidesToScroll: 1,
                },
                pictures: [
                {
                    key: 'img1',
                    src: '/images/pic1.jpg'
                },
                {
                    key: 'img2',
                    src: '/images/pic2.jpg'
                },
                {
                    key: 'img3',
                    src: '/images/pic3.jpg'
                }]
            };
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>