# douyin-vue: a Vue 3 and Pinia TikTok clone you can run locally

> 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.

**zyronon/douyin** —  Vue3 + Pinia 仿抖音，Vue 在移动端的最佳实践 .  Imitate TikTok ，Vue Best practices on Mobile

- Repository: https://github.com/zyronon/douyin
- Website: https://dy.typewords.cc/
- Stars: 11,545 · Forks: 3,099
- Language: Vue
- License: GPL-3.0
- Published: 2026-09-21 · Updated: 2026-09-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/zyronon-douyin

## 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.

```bash
git clone https://github.com/zyronon/douyin.git
cd douyin
npm install
npm run dev
```

The 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.

```bash
docker pull ghcr.io/zyronon/douyin-vue:latest
docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
```

The 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.

## 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.

## FAQ

### 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.

## Sources

- [License: GPL-3.0](https://github.com/zyronon/douyin/blob/master/LICENSE)
- [Project website](https://dy.typewords.cc/)
- [README](https://github.com/zyronon/douyin/blob/master/README.md)
- [Releases](https://github.com/zyronon/douyin/releases)
- [zyronon/douyin on GitHub](https://github.com/zyronon/douyin)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/zyronon-douyin