Cannot use in vue

[khoiphanngoc89]

I want to integrate with vue js, nuxt js but it causes a lot of errors. Could anyone show me the way to use it in nuxt js, vue js?

[GreenRidingHood]

@khoiphanngoc89 not sure if you still need it. I spent so much time too and get help from JS person, finally i am seeing it but still i m not happy with it.

Nuxtjs, and bulma <div id="carousel" class="carousel"> <div class="item-1"> <figure class="image is-16by9"> <img src="~/assets/img/img1.png"> </figure> </div> <div class="item-2"> <figure class="image is-16by9"> <img src="~/assets/img/img2.png"> </figure> </div> <div class="item-3"> <figure class="image is-16by9"> <img src="~/assets/img/imgs3.png"> </figure> </div> </div>

as you know we need to use figure tag at bulma for images, but carousel we need a div too ~ i mean i copied from doc.

and again from doc, i copy script part into mounted()

and uptade ('.carousel', options); that section and replace options with object

var carousels = bulmaCarousel.attach('.carousel', { slidesToScroll: 1, slidesToShow: 1, });

if you still dont see, i saw one time when i gave Height.. but that was before put <figure inside <div tag

so that was vue part.

you have to go over doc for installation, at nuxt.config , you need to include js and css CDN's

and at main.scss or app.scss which ever you created add

@import "~bulma"; @import '~bulma-carousel';

after ~bulma one..

that worked for me

p.s. i am still looking to way making see 1 image a time, there is no example for that

[khoiphanngoc89]

@khoiphanngoc89 not sure if you still need it. I spent so much time too and get help from JS person, finally i am seeing it but still i m not happy with it.

Nuxtjs, and bulma <div id="carousel" class="carousel"> <div class="item-1"> <figure class="image is-16by9"> <img src="~/assets/img/img1.png"> </figure> </div> <div class="item-2"> <figure class="image is-16by9"> <img src="~/assets/img/img2.png"> </figure> </div> <div class="item-3"> <figure class="image is-16by9"> <img src="~/assets/img/imgs3.png"> </figure> </div> </div>

as you know we need to use figure tag at bulma for images, but carousel we need a div too ~ i mean i copied from doc.

and again from doc, i copy script part into mounted()

and uptade ('.carousel', options); that section and replace options with object

var carousels = bulmaCarousel.attach('.carousel', { slidesToScroll: 1, slidesToShow: 1, });

if you still dont see, i saw one time when i gave Height.. but that was before put <figure inside <div tag

so that was vue part.

you have to go over doc for installation, at nuxt.config , you need to include js and css CDN's

and at main.scss or app.scss which ever you created add

@import "~bulma"; @import '~bulma-carousel';

after ~bulma one..

that worked for me

p.s. i am still looking to way making see 1 image a time, there is no example for that

Thank you a lot. I will try it. I will close my question.