Adding a plugin in vue.js fails

Question

I'm having trouble using vue-litebox ( https://www.npmjs.com/package/vue-litebox), and I'm wondering if it is the component that is behaving odd or if it is me implementing it wrong.

I see this error in the console:

[Vue warn]: Method "showLitebox" has already been defined as a data property.

Here is the sample code from the vue-litebox docs:

import VueLitebox from 'vue-litebox' 

var app = new Vue({
  el: '#app',
  components: { VueLitebox },
  data: {
      images: [
          '/images/01.png',
          '/images/02.png',
          {
              title: 'My image title',
              src: '/images/03.png'
          }
      ],
      showLitebox: false
  },
  methods: {
      showLitebox() {
          this.showLitebox = true;
      },
      hideLitebox() {
          this.showLitebox = false;
      }
  }
})

<div id="app">
    <vue-litebox v-if="showLitebox"
        :items="images"
        @close="hideLitebox">
    </vue-litebox>
    <button type="button" @click="showLitebox">Show Litebox</button>
</div>

And here is how I implemented it in my custom component:

<template>
  <div id>
    <vue-litebox v-if="showLitebox" :items="images" @close="hideLitebox"></vue-litebox>
    <button type="button" @click="showLitebox">Show Litebox</button>
  </div>
</template>


<script>
import VueLitebox from "vue-litebox";

export default {
  components: { VueLitebox },
  data() {
    return {
      images: [
        "https://dummyimage.com/1600/ffffff/000000",
        "https://dummyimage.com/1600/ffffff/000000",
        {
          title: "My image title",
          src: "https://dummyimage.com/1600/ffffff/000000"
        }
      ],
      showLitebox: false
    };
  },
  methods: {
    showLitebox() {
      this.showLitebox = true;
    },
    hideLitebox() {
      this.showLitebox = false;
    }
  }
};
</script> 

<style scoped>
.image {
  float: left;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid #ebebeb;
  margin: 5px;
}
</style>

Answer 1

The console warning indicates that you have defined showLitebox more than once in your <script>. You've defined showLitebox as a data property and a method. Rename one of them to fix the issue.

data() {
👉 showLitebox: false,
},
methods: {
👉 showLitebox() { ... }
}

And if you're wondering why the litebox closes upon clicking next/prev, it's caused by a bug in the component, where it closes on clicks at its root element.

demo