Bootstrap-Vue b-skeleton and b-skeleton-wrapper Not Working

2.1k views Asked by At

I am trying to use the b-skeleton component of Bootstrap-Vue but it's not working.

I use Nuxt.js and tried to import b-skeleton both as a plugin and an individual component as described in the documentation. But it's still not working.

Also, just updated Vue-Bootstrap to the latest version - "bootstrap-vue": "^2.18.0"

I tried to use b-skeleton on the template like this. I just copied and paste it like in the docs.

<template>
  <b-container>
    <b-skeleton-wrapper :loading="true">
      <template #loading>
        <b-card>
          <b-skeleton width="85%"></b-skeleton>
          <b-skeleton width="55%"></b-skeleton>
          <b-skeleton width="70%"></b-skeleton>
        </b-card>
      </template>

      <b-card>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra nunc sapien,
        non rhoncus elit tincidunt vitae. Vestibulum maximus, ligula eu feugiat molestie,
        massa diam imperdiet odio, vitae viverra ligula est id nisi. Aliquam ut molestie est.
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
        turpis egestas. Phasellus at consequat dui. Aenean tristique sagittis quam,
        sit amet sollicitudin neque sodales in.
      </b-card>
    </b-skeleton-wrapper>
  </b-container>
</template>

Then render in the scripts like this:

<script>
  import Vue from 'vue'
  import { BSkeleton, BSkeletonWrapper } from 'bootstrap-vue'

  Vue.component('b-skeleton', BSkeleton)
  Vue.component('b-skeleton-wrapper', BSkeletonWrapper)

  exports default {
    // Vue code
  }
</script>

Also tried like this:

<script>
  import Vue from 'vue'
  import { BSkeleton, BSkeletonWrapper } from 'bootstrap-vue'

  exports default {
    name: 'name',
    components: {
      BSkeleton,
      BSkeletonWrapper,
    }
    // Vue code
  }
</script>

Because I use Nuxt.js I even define it as a plugin.

  • Created a BootstrapVueSkeleton.js in the plugins folder.

  • Added the file in the nuxt.config.js:

    plugins: ['@/plugins/bootstrapVueSkeleton'],

  • Inside the bootstrapVueSkeleton.js: (As described on the docs)

    import Vue from 'vue';

    import { SkeletonPlugin } from 'bootstrap-vue';

    Vue.use(SkeletonPlugin);

Thank you in advance!

0

There are 0 answers