douyin-vue: a Vue 3 and Pinia TikTok clone you can run locally
Vue3 + Pinia 仿抖音,Vue 在移动端的最佳实践 . Imitate TikTok ,Vue Best practices on Mobile
At a glance
- What is it?
- zyronon/douyin rebuilds the TikTok mobile feed in Vue 3, Vite 5 and Pinia, with axios-mock-adapter serving local JSON instead of a backend. It is a front-end reference project, not a Douyin client.
- Who is it for?
- Adopt douyin-vue if you are learning how a full-screen vertical video feed is built in Vue 3 and Pinia, and you want a working codebase to read. Do not adopt it if you need a real Douyin or TikTok client, a backend, or code you can ship in a closed-source product, since the licence is GPL-3.0 and the README states the project is for study and research only and not for commercial use.
- Can I use it commercially?
- Yes, with conditions. GPL-3.0 is a copyleft licence: if you distribute software that includes it, you must release that software's source code under the same licence. Running it internally without distributing it does not trigger that obligation.
- Is it still maintained?
- Yes. The repository last received commits 70 days ago.
- What is it written in?
- Mainly Vue, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on September 29, 2026, and from our analysis. They are not legal advice.
DEEP OPEN-SOURCE ANALYSIS
What douyin-vue actually is, and who it is for
The README describes douyin-vue as a mobile short-video project that imitates Douyin and TikTok, and calls it a set of best practices for Vue on mobile. The intended audience is a front-end developer who wants to see how a vertical, swipeable video feed is assembled in Vue 3 rather than to install a working Douyin client. The stack named in the README is Vue 3, Vite 5 and Pinia, with axios-mock-adapter intercepting API calls and returning local JSON so the app behaves as if a backend existed. That single decision defines the project: there is no server to deploy, no account system, and no network dependency for the feed itself. The README also states the project is for learning and research only and may not be used commercially, and the repository carries GPL-3.0. Those two statements matter more than the feature list for anyone evaluating adoption.
How the mock data layer replaces a backend
The architecture visible in the repository is a standard Vite single-page app with an unusual data path. Components call an Axios instance, axios-mock-adapter intercepts those requests inside the browser, and the responses come from JSON files bundled with the project. mockjs is also listed as a dependency, which fits the same pattern of generating or shaping fake responses. The practical consequence is that the feed, comments and profile data are fixed at build time. You cannot point the app at a real API by changing one environment variable, because the mock adapter is what answers the calls. For a study project this is a strength: cloning the repository and running the dev server gives you a populated feed with no keys, no rate limits and no CORS setup. For anything resembling a product it is the first thing you would have to remove, and the README does not describe a supported path for swapping the mock layer for a real service.
Running douyin-vue locally with npm
The README is explicit that the repository must be cloned with git. Downloading the ZIP archive will not work, and the README recommends the Gitee mirror if the GitHub clone is slow. After cloning, install dependencies and start the Vite dev server.
git clone https://github.com/zyronon/douyin.git
cd douyin
npm install
npm run devThe dev server is described as serving on port 3000, so the README points you at http://127.0.0.1:3000. The preview requirement is the part people miss: the README says you must switch the browser to mobile mode, pressing F12 for the console and then Ctrl+Shift+M, before the layout renders correctly. On a desktop viewport the feed is not the intended experience. The package.json also exposes start and serve as aliases for the same vite --host command, so any of the three works.
Deploying the Docker image and the Vercel button
Two deployment paths are documented. The README includes a Deploy with Vercel button that clones the repository, and a Docker route using a prebuilt image pushed to GitHub Container Registry. The Dockerfile builds with Node 20, runs pnpm install followed by npm run build, and copies the resulting dist directory into an nginx runner image.
docker pull ghcr.io/zyronon/douyin-vue:latest
docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latestThe README notes the nginx reverse proxy listens on a custom port and gives the 80:80 mapping as an example. The Makefile offers the same flow locally with docker-build, docker-run and docker-build-run targets, and warns that a leftover node_modules directory can cause build errors, so it suggests deleting it before building an image. Note that the Makefile's buildx target only builds linux/amd64 despite the Dockerfile declaring multi-platform arguments.
The mobile-only preview and other real limitations
The most concrete limitation is stated in the README itself: the project is meant to be viewed in a mobile browser or an emulated mobile viewport. That is not a bug, but it means screenshots, desktop QA and responsive testing are all outside the intended use. A second limitation is the data layer described above; the feed is local JSON, so any feature that depends on live content, authentication or server state is absent. A third is scope. The README says the project is in early development and that new features are still being added, which is consistent with the release history: v1 arrived in February 2024, v1.0 in March 2024 and v1.1 in April 2024. The last push to the repository was on 2026-07-21, so the code has moved since the last tagged release, but the release notes give no migration guidance between versions. If you need a documented upgrade path, this project does not provide one.
How it differs from a native app or a real TikTok client
The obvious alternative is the actual Douyin or TikTok application, and the difference is not cosmetic. A native app talks to a real backend, handles accounts, uploads and moderation, and ships through app stores. douyin-vue is a browser application with mocked data and no server component at all. A closer comparison for a developer is a component library or a starter template for vertical video feeds, where you would supply your own API and state management. Here the feed, routing and state are already wired together with Pinia and vue-router, which is the value: you get an opinionated implementation to read rather than a set of primitives to assemble. The cost is that the opinion is baked in, and the README does not document how to detach the mock adapter from the rest of the app.
Licence, maintenance and what to verify first
The licence is GPL-3.0, and the README adds a plain statement that the project is for learning and research only and not for commercial use. Those two constraints should be read together before you copy any code into another project; this is a description of the repository's terms, not legal advice, and a lawyer should review anything you intend to distribute. On maintenance, the last push was on 2026-07-21, which is recent enough that the repository is not dormant, but the newest tagged release is v1.1 from 2024-04-01, so the gap between releases and commits is wide. The repository does not expose a changelog, so before depending on a specific behaviour, check the commit history rather than the release tags.
Editorial conclusion
Adopt douyin-vue if you are learning how a full-screen vertical video feed is built in Vue 3 and Pinia, and you want a working codebase to read. Do not adopt it if you need a real Douyin or TikTok client, a backend, or code you can ship in a closed-source product, since the licence is GPL-3.0 and the README states the project is for study and research only and not for commercial use. Before cloning, check that the repository still accepts the mobile-only preview requirement, and verify the last push date against your own tolerance for stale dependencies.
Frequently asked questions
Is douyin-vue the same thing as the Douyin app?
No. It is a Vue 3 project that imitates the Douyin and TikTok mobile interface, with data stored locally and served through axios-mock-adapter instead of a real backend.
How do I install douyin-vue on my machine?
The README says to clone the repository with git, then run npm install and npm run dev, and open http://127.0.0.1:3000 with the browser switched to mobile mode. It also warns that downloading the ZIP archive instead of cloning will not work.
Can I use douyin-vue commercially?
The README states the project is for learning and research only and may not be used commercially, and the repository is licensed under GPL-3.0.
Does douyin-vue need a backend server?
No. The README describes data being kept in the project locally, with axios-mock-adapter intercepting API calls and returning local JSON to simulate real backend requests.
Official sources
Add this badge to your README
If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.
[](https://hysenlabs.com/projects/zyronon-douyin)
Community notes