GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → dnldsht → vue-insta-stories

dnldsht / vue-insta-stories

Licence: MIT license
Vue 2 & 3 library for Instagram like stories.

Programming Languages

typescript
32286 projects
Vue
7211 projects
CSS
56736 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Labels

storiesnpminstagramlibraryvuevue2instagram-storiesvue3

Projects that are alternatives of or similar to vue-insta-stories

slider
Vue 3 slider component with multihandles, tooltips merging and formatting (+Tailwind CSS support).
Stars: ✭ 162 (+260%)
Mutual labels:  vue2, vue3
janak
Your next vue.js package!
Stars: ✭ 26 (-42.22%)
Mutual labels:  vue2, vue3
g2plot-vue
g2plot for vue, both 2 and 3
Stars: ✭ 106 (+135.56%)
Mutual labels:  vue2, vue3
vue-input-autowidth
A Vue.js directive that automatically resizes an input's width to fit its contents.
Stars: ✭ 94 (+108.89%)
Mutual labels:  vue2, vue3
hoc-element-table
📦 A Vue 3.x Table Component built on Webpack 5
Stars: ✭ 26 (-42.22%)
Mutual labels:  vue2, vue3
vue3-chat
2021👨‍🎓Vue2/3全家桶 + Koa+Socket+Vant3前后端分离移动端聊天应用。vue+node全栈入门项目
Stars: ✭ 46 (+2.22%)
Mutual labels:  vue2, vue3
fluent-vue
Internationalization plugin for Vue.js
Stars: ✭ 137 (+204.44%)
Mutual labels:  vue2, vue3
v-intl
Add i18n to your awesome Vue 3 app 🔉
Stars: ✭ 13 (-71.11%)
Mutual labels:  vue2, vue3
security-code
A powerful security code input supports dynamic configuration of the number of input boxes.
Stars: ✭ 63 (+40%)
Mutual labels:  vue2, vue3
vue-split-carousel
a carousel component for vue, meanwhile display several carousel item
Stars: ✭ 37 (-17.78%)
Mutual labels:  vue2, vue3
vue-pattern-input
Use RegExp to limit input
Stars: ✭ 25 (-44.44%)
Mutual labels:  vue2, vue3
v-pip
🖼 Tiny vue wrapper for supporting native picture-in-picture mode.
Stars: ✭ 30 (-33.33%)
Mutual labels:  vue2, vue3
toggle
Vue 3 toggle component with labels, custom slots and styling options (+Tailwind CSS support).
Stars: ✭ 75 (+66.67%)
Mutual labels:  vue2, vue3
v-drag
The simplest way to integrate dragging on Vue.js
Stars: ✭ 71 (+57.78%)
Mutual labels:  vue2, vue3
vue-unstated
A tiny state management library for Vue Composition API.
Stars: ✭ 30 (-33.33%)
Mutual labels:  vue2, vue3
vue-snippets
Visual Studio Code Syntax Highlighting For Vue3 And Vue2
Stars: ✭ 25 (-44.44%)
Mutual labels:  vue2, vue3
vue-ray
Debug your Vue 2 & 3 code with Ray to fix problems faster
Stars: ✭ 48 (+6.67%)
Mutual labels:  vue2, vue3
vue3-jd-h5
🔥 Based on vue3.0.0, vant3.0.0, vue-router v4.0.0-0, vuex^4.0.0-0, vue-cli3, mockjs, imitating Jingdong Taobao, mobile H5 e-commerce platform! 基于vue3.0.0 ,vant3.0.0,vue-router v4.0.0-0, vuex^4.0.0-0,vue-cli3,mockjs,仿京东淘宝的,移动端H5电商平台!
Stars: ✭ 660 (+1366.67%)
Mutual labels:  vue3
QuestWeaver
Procedurally generated quests and stories for computer games.
Stars: ✭ 60 (+33.33%)
Mutual labels:  stories
dragonfly-dag
完全支持Vue3和Vitejs的DAG流程图组件
Stars: ✭ 54 (+20%)
Mutual labels:  vue3
View All Similar Projects ➔

vue-insta-stories

Vue component for Instagram stories
Live demo


Install

yarn add vue-insta-stories

Usage

Work in progress documentation can be found here

Features

  • Works with vue 2/3
  • Timer and timeline on the top
  • Swipe up to see more
  • Hold to pause current story
  • Tap to navigate between stories
  • Straight forward usage for images & videos
  • Header slot
  • Custom templates

Contributing

We are open to pull requests!

How to test the lib

yarn lib:watch # watch for changes on the lib package
yarn dev # starts vue3 demo
yarn dev:2 # starts vue2 demo
  
# check yarn link to test the new version in your project

Credits

This project was inspired by @kayue work

License

MIT - Copyright (c) 2021 Uneven Software

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].