Vue.js(nuxt.js)内でのBulma-extention(Bulma-carousel)の使い方

Vue.jsでbulma-extenionの使い方がわからない人へ!

公式ドキュメントを見てもvue.jsでの使い方が載ってない!
ということで、自己解決したメモです。

bulma-carouselにてテストしましたが、他のextentionでも同様かと思います。
(bulmaの導入はできているものとします)

公式:https://wikiki.github.io

Step1 CSSを読み込む(bulma-carouselの例)

nuxt.jsのサイト全体で使う場合、nuxt.config.jsで読み込む

css: [
//bulma
{
src: '~assets/main.scss',
lang: 'scss'
},
//bulma extention
'bulma-carousel/dist/css/bulma-carousel.min.css',
],

単体vueコンポーネントの場合、style内でimportする

どっちかわからない!の場合は、HTMLのヘッダーから読み込んでもOKですよ。

Step2(重要) vueのコンポーネント内でIDを指定してattach()する。

id=”bulmaCarousel”という名前を予め指定しておきました。

<div id="bulmaCarousel" class="carousel carousel-animated carousel-animate-slide">
<div class="carousel-container">
<div class="carousel-item has-background is-active">
<img class="is-background" src="https://wikiki.github.io/images/merry-christmas.jpg" alt="" width="640" height="310" />
<div class="title">Merry Christmas</div>
</div>
<div class="carousel-item has-background">
<img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" width="640" height="310" />
<div class="title">Original Gift: Offer a song with <a href="https://lasongbox.com" target="_blank" rel="noopener">La Song Box</a></div>
</div>
<div class="carousel-item has-background">
<img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" width="640" height="310" />
<div class="title">Sushi time</div>
</div>
<div class="carousel-item has-background">
<img class="is-background" src="https://wikiki.github.io/images/life.jpg" alt="" width="640" height="310" />
<div class="title">Life</div>
</div>
</div>
<div class="carousel-navigation">
<div class="carousel-nav-left"></div>
<div class="carousel-nav-right"></div>
</div>
</div>
<script>
        import bulmaCarousel from "bulma-carousel/dist/js/bulma-carousel.min.js";
        export default {
            mounted: function () {
                new bulmaCarousel(document.getElementById("bulmaCarousel"));
            }
        };
</script>

attach()しないと使えないよって公式ドキュメントのどこにも書いてないし!

vueのリアクティブなdataと組み合わせる場合は以下のようにattach()するようです。


参考:https://github.com/Wikiki/bulma-extensions/issues/18

コメントする