How to add slick carousel to Nuxt

Question

I am basically trying to add this onto the site

https://codepen.io/pnmcosta/pen/GYpxgr

Placing that on one of the components and it gives the following error

render function or template not defined in component: FirstPageSecondSection

Basically just adding that onto the script,style and template

Here is one of the example when I added the script

<script>
export default {
    data:() =>({
        
    })
}
    $(function() {
  $('.slider-services').slick({
    dots: true,
    appendDots: '.slider-dots',
    arrows: true,
        infinite: false,
        slidesToScroll: 3,
        slidesToShow: 3,
        accessibility: true,
        variableWidth: false,
        focusOnSelect: false,
        centerMode: false,
        responsive: [
            {
                breakpoint: 992,
                settings: {
                    slidesToScroll: 2,
                    slidesToShow: 2
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToScroll: 1,
                    slidesToShow: 1
                }
            }
        ]
  });
});  
</script>

I am new on Nuxtjs and hoping for an enlighment from the seniors.

Answer 1

This one is using slick carousel. It is based on jQuery. Since you're using VueJS, I do recommend to use any other carousel than trying to use some imperative hacky code.
VueJS is declarative, hence not relying on jQuery (imperative) may be a good idea. Also, VueJS is enough by itself to not bring a whole jQuery on top of your code base (more JS for nothing really).

Here is a whole list of carousels that you can use: https://github.com/vuejs/awesome-vue#carousel

I found and used vue-silentbox, not the smallest but doing it's job well.

I've used it on this website, click on an image and you'll see the carousel.
A code example can be found here: https://github.com/kissu/pet-friends/blob/master/src/views/Home.vue#L26

---

Formatted and modified code of OP, this one by itself is not working because we need to define jQuery too (otherwise $ will be undefined). Still, NOT a solution that I do recommend.

<script>
export default {
  mounted() {
    $(function () {
      $('.slider-services').slick({
        dots: true,
        appendDots: '.slider-dots',
        arrows: true,
        infinite: false,
        slidesToScroll: 3,
        slidesToShow: 3,
        accessibility: true,
        variableWidth: false,
        focusOnSelect: false,
        centerMode: false,
        responsive: [
          {
            breakpoint: 992,
            settings: {
              slidesToScroll: 2,
              slidesToShow: 2,
            },
          },
          {
            breakpoint: 600,
            settings: {
              slidesToScroll: 1,
              slidesToShow: 1,
            },
          },
        ],
      })
    })
  },
}
</script>