Simple usage
<template>
<Stories :stories="items" />
</template>
<script>
import { Stories } from "vue-insta-stories";
export default {
components: { Stories },
data: () => ({
items: [
"https://picsum.photos/350/200/",
"https://picsum.photos/400/201/",
{
url: "https://file-examples-com.github.io/5mb.mp4",
type: "video",
},
]
})
};
</script>
Props
| Property |
Type |
Default |
Description |
stories |
Array<String|Object> |
required |
An array of image urls or array of story objects (more info below) |
interval |
Number |
2000 |
Story duration in milliseconds |
isPaused |
Boolean |
false |
Toggle the playing state |
loop |
Boolean |
false |
Loop through stories |
currentIndex |
Number |
0 |
Set the current story index |
| Events |
|
|
|
storyStart |
Function(index) |
- |
Callback when a story starts |
storyEnd |
Function(index) |
- |
Callback when a story ends |
allStoriesEnd |
Function() |
- |
Callback when all stories have ended (not emitted if loop=true) |
seeMore |
Function(story) |
- |
Callback when user have pressed See more |
prev |
Function() |
- |
Callback when user press prev |
next |
Function() |
- |
Callback when user press next |
update:currentIndex |
Function(index) |
- |
|
update:isPaused |
Function(paused) |
- |
|
Story Object
| Property |
Description |
url |
The url of the resource, image or video. |
type |
Optional. Type of the story. 'image' | 'video' |
duration |
Optional. Duration for which a story should persist. |
template |
Optional. Renders story in a different template see more below. |
seeMore |
Optional. Enable see more on story (true | { label: 'See more!' } |
Style
/** full screen on mobile & fixed size on desktop **/
.ig-stories {
position: absolute;
height: 100vh;
height: -webkit-fill-available;
width: 100vw;
top: 0;
}
@media (min-width: 768px) {
.ig-stories {
position: relative;
height: 730px;
width: 420px;
}
}
if you are using tailwind you can write
<Stories class="absolute top-0 h-100vh w-100vw md:(h-730px w-420px relative)" />
With header
<template>
<Stories :stories="items">
<template #header="{story}">
<story-header :story="story" />
</template>
</Stories>
</template>
<script>
import { Stories } from "vue-insta-stories";
export default {
components: { Stories },
data: () => ({
items: [ "https://picsum.photos/350/200/"]
})
};
</script>
With custom slot
<template>
<Stories :stories="items">
<template #pool="{story}">
<pool-story :story="story" class="flex-grow"></pool-story>
</template>
</Stories>
</template>
<script>
import { Stories } from "vue-insta-stories";
export default {
components: { Stories },
data: () => ({
items: [{ poolId: 23, template: "pool" }]
})
};
</script>