Installation 🚀

npm

npm install vue-stories

yarn

yarn add vue-stories

Import

import VueStories from 'vue-stories';

Usage👨‍💻

<template>
  <div @click="openStories">
  
  <VueStories
    :avatarImage=""
    :avatarTitle=""
    :stories="[]" 
    :isPause=true 
    :header=true
    :isSave=true
    ref="vueStories"
    v-on:onNextFrame="actionOnNext"
    v-on:onPreviousFrame="actionOnPrevious"
    v-on:onComplete="actionOnComplete"
    v-on:onFullscreen="actionOnFullscreen"
    v-on:onSave="actionOnSave"
/>
</template>

<script>
  import VueStories from 'vue-stories';

  export default {
    name: 'App',
    
    components: { VueStories },
    
    data() {
      return {
      
        strories:[
          {
            id: String || Number ,
            url: String ,
            title: String ,
            subTitle: String,
            styles:{
              backgroundSize:'contain',  
          }
        ]
      }
    },
    
    methods: {
      //open vue stories
      openStories(){
           this.$refs.vueStories.toggle_fullscreen(true)
      },
      
      actionOnNext(id)
      actionOnPrevious(id)
      actionOnComplete(id)
      actionOnFullscreen(status)
      actionOnSave(status, id)
    }
  };
</script>

Props

| Prop | Type | Description | Default value | | ------ | ------ | ------ | ------ | avatarImage | String | Image for your avatar | /assets/sample.png avatarTitle | String | Title fo your avatar | '' stories | Array | List of the stories | [] isPause | Boolean | Pause the story or not | true header | Boolean | Show the header or not | true isSave | Boolean | Show the save button or not | true

Events

| Event name | Usage | | ------ | ------ | onNextFrame | Returns id of the previous frame | onPreviousFrame | Returns the id of the next frane | onComplete | Returns the id of the last frame | onSave | Returns true or false with the current frame id |

Support the project ⭐

If you like my work please share and give a star