Vue Stories

✌🏻Social media like stories and status for Vue.js.

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