No store or mutations on v2?

[FerchoCarcho]

@wffranco I dont understand the logic inside Vuestrap 2, because... @ //App.vue

<template>
  <div id="app">

      <alert v-model="valert" placement="top" :duration="3000"
             type="success" width="400px" dismissable
      >
            {{item}}
      </alert>
    <router-view></router-view>

  </div>
</template>

<script type="text/ecmascript-6">

  import { mapGetters } from 'vuex'
  import { alert } from 'vue-strap'
  import Cnavbar from './Cnavbar.vue'
  import Cfooter from './Cfooter.vue'

export default {
  name: 'app',
  components: {
      alert
  },
    computed: mapGetters({
        valert: 'getAlert'
    }),

  data(){
    return{
      item:'this is an alert',
    }
  }
}
</script>
<style lang="less">
  @import "../../node_modules/vue2-animate/src/vue2-animate.less";
</style>
<style lang="sass">
  @import '../../assets/sass/backend/backend.scss';
</style>

As you can see I use store and mutations Also I need to use the vue 2 Animate for animation. inside testalert I call the mutation. @ //testalert.vue

<template>
    <div class="container">
                <button @click.prevent="toggle">show </button>
     </div> 
</template>
<script type="text/ecmascript-6">

    import { mapMutations } from 'vuex'

    export default {
    name:'testalert',
    methods:{
            ...mapMutations({
                toggle: 'TOGGLE_ALERT'
            })
    }
}
</script>

@//Alert.vue

<template>
  <transition name="fadeLeft">
    <div v-show="val" :class="['alert', 'alert-'+type, placement]" :style="{width:width}" role="alert">
      <button v-show="dismissable" type="button" class="close" @click="val = false">
        <span>&times;</span>
      </button>
      <slot></slot>
    </div>
  </transition>
</template>

Here at the vuestrap alert component Im using the fadeLeft effect from the library. But It doesnt work because It uses the precompiled (as I understand) Fade Effect. Also, when the alert is dissmisable [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value" Because you need mutations to modify the state of The alert. Would It be possible to make that kind of distribution work with Vuestrap? If not, Could you provide a simple example how to Use e.g Alert ? Ideally, you would need to provide 1. the component 2. the vuex Store 3. the initizalization.

[wffranco]

still not ready all components for vue2, working on it.

[FerchoCarcho]

@wffranco Thank you for clarifying.

[silviolleite]

The Modal isn't working in Vue2, the modal open once and after doesnt open more. If I click outside Modal area to close it the console show this message. [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "show" (found in component )

[arion]

Still do not have a fix for this?

For now I resolve this problem by disable backdrop and add custom close button like this:

      <modal :show.sync="showProductModal" effect="fade" :backdrop=false>
        <div slot="modal-header">
          <div class="modal-header">
            <button type="button" class="close" @click="showProductModal = false"><span>&times;</span></button>
            <h4 class="modal-title">
              Title
            </h4>
          </div>
        </div>
        <div slot="modal-body" class="modal-body">
          ...
        </div>
      </modal>

[silviolleite]

Thank you!