A Vue3 mobile app that mimics TikTok's UI and interactions, showcasing Vue best practices for mobile development.
Douyin-Vue is an open-source frontend project that clones the TikTok (Douyin) mobile application interface using Vue.js. It's designed as a learning resource and demonstration of how to build high-performance, mobile-optimized web apps with Vue 3, featuring a vertical video feed, smooth interactions, and mocked API data. The project solves the need for a practical, real-world example of Vue best practices applied to a complex mobile UI.
Vue.js developers, especially those learning Vue 3 or interested in mobile web development, who want to study a production-like implementation of a popular social media app's UI.
Developers choose Douyin-Vue because it provides a complete, well-structured reference implementation of a complex mobile app using the modern Vue ecosystem. It focuses specifically on achieving native-like smoothness on mobile, which is a valuable learning resource beyond basic tutorials.
Vue3 + Pinia 仿抖音,Vue 在移动端的最佳实践 . Imitate TikTok ,Vue Best practices on Mobile
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Faithfully mimics TikTok's vertical video feed and swipe gestures, as demonstrated in the GIFs, providing a realistic reference for mobile UI patterns.
Optimized for smooth scrolling and transitions using techniques like dynamic viewport height (vh), aiming for native-app-like experience on mobile browsers.
Built with Vue 3 composition API, Vite for fast tooling, and Pinia for state management, showcasing current Vue best practices in a practical project.
Includes detailed blog posts (linked in the README) that explain implementation steps, such as infinite scroll and routing, enhancing its educational value.
Relies on axios-mock-adapter for local JSON data, which doesn't handle real API calls or dynamic content, limiting its usefulness for production development.
Requires browser emulation (F12 and Ctrl+Shift+M) for desktop preview, as noted in the README, and isn't optimized for cross-device responsiveness beyond mobile.
Missing essential social media functionalities like user accounts, video upload, or real-time interactions, making it incomplete for a full-scale app.
douyin is an open-source alternative to the following products: