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

Пользователь

от jaylen.trantow , в категории: JavaScript , 6 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от montana_hand , 6 месяцев назад

@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.