Как поставить vue-owl-carousel в nuxt.js?

@jaylen.trantow 

Для установки и настройки vue-owl-carousel в Nuxt.js нужно выполнить следующие шаги:

1. Установите пакеты vue-owl-carousel и owl.carousel:

1

npm install vue-owl-carousel owl.carousel

1. Создайте файл плагина для vue-owl-carousel. Создайте новый файл с именем vue-owl-carousel.js в папке plugins вашего проекта:

1
2
3
4

import Vue from 'vue'
import VueCarousel from 'vue-owl-carousel'

Vue.component(VueCarousel.name, VueCarousel)

1. Внесите изменения в файл nuxt.config.js, чтобы включить плагин vue-owl-carousel. Добавьте vue-owl-carousel.js в массив plugins:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

export default {
  // ...

  plugins: [
    // ...
    { src: '~/plugins/vue-owl-carousel.js', mode: 'client' }
  ],

  // ...
}

Обратите внимание на добавленный параметр mode: 'client', который говорит Nuxt.js, что плагин должен загружаться только на клиентской стороне.

1. Теперь вы можете использовать компонент vue-owl-carousel в ваших компонентах Vue. Например, добавьте следующий код в свой компонент Vue:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

  
    Slide 1
    Slide 2
    Slide 3
  



export default {
  // ...
}



.item {
  height: 200px;
  background-color: #ececec;
}

Теперь слайдер должен работать в вашем проекте Nuxt.js.