Using quick view inside vue component

[josedanconstruction]

Hello! I have the following problem:

<template>
  <div>
    <div id="quickviewDefault" class="quickview">
      <header class="quickview-header">
        <p class="title">Quickview title</p>
        <span class="delete" data-dismiss="quickview"></span>
      </header>

      <div class="quickview-body">
        <div class="quickview-block">
          ...
        </div>
      </div>
      <footer class="quickview-footer">
      </footer>
    </div>
      <button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
    <div v-if="visible === true">
      .....
    </div>
  </div>
</template>
<script>
var quickview = require("../../node_modules/bulma-quickview/dist/js/bulma-quickview.min.js")
quickview.attach()
</script>

(This is an shortened version of the vue component)

When the pages renders the quickview elements that are supposed to be hidden, are not and clicking the button does nothing. My guess is that the attach function is not firing at the correct moment but I can't figure out where to place it (if this is the problem)

Any thoughts?

[josedanconstruction]

Found another solution. But it seems that this component can't work out of the box with Vue. I may be wrong

[mrdotkg]

@josedanconstruction What was your work around? Where did you place the .attach() method?

Created hook for VUE components, also not the correct place to trigger .attach() method for my needs.

THIS DID NOT WORK

created: function () {
    var quickviews = bulmaQuickview.attach(); // quickviews now contains an array of all Quickview instances
  },

EDIT

THIS WORKED

mounted: function () {
    var quickviews = bulmaQuickview.attach(); // quickviews now contains an array of all Quickview instances
  },

[vcmirko]

This is a bad vue approach if you ask me. The quickview component works fine with just css, no js is required. I just wrapped it in a component like this. I added a transition for the slide in effect.

BulmaQuickView.vue

<template>
  <transition name="slide-fade" appear>
    <div class="quickview is-active">
      <header class="quickview-header is-vcentered">
        <p class="has-text-weight-bold is-size-4">{{ title }}</p>
        <span class="delete" @click="$emit('close')"></span>
      </header>

      <div class="quickview-body">
        <div class="quickview-block p-4">
          <slot></slot>
        </div>
      </div>

      <footer v-if="footer" class="quickview-footer">
        <p>{{ footer }}</p>
      </footer>
    </div>
  </transition>
</template>
<script>
  import Vue from 'vue'
  import "../../public/assets/bulma_quickview.scss"  // you must set this path correct though
  export default{
    name:"BulmaButton",
    props:{
      title:{type:String},
      footer:{type:String}
    },
    data(){
      return  {

      }
    },methods:{
    }
  }
</script>
<style scoped>
.slide-fade-enter-active, .slide-fade-leave-active {
  transform: translateX(0%);
  transition: all 0.4s ease-in-out;
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(100%);
}
</style>

and use like this

<BulmaQuickView title="Quickview title" footer="Quickview footer"><p>hoho</p></BulmaQuickView>

make sure you add a bulma_quickview.scss where you load the sass file

@import "variables";  // this holds my bulma variables
@import '~bulma';
@import '~bulma-quickview/src/sass/index.sass';

no need to import any js. I only use the styling part. And use vue to handle the click events (like close).
I do the same for bulma_checkradio extensions, works flawlessly. 1 variables.scss with all bulma variables.