zhixiaoqiang / sfc-playground-vant

Try Vant in the Playground. Currently only Vant 3+ is supported

Home Page:https://sfc-playground-vant.vercel.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SFC Playground with Vant

This is an Vant SFC Playground. Click the vercel.app Or zhixiaoqiang.github.io link to view.


NOTE! The reason why this is designed to manually import { injectVant } is to be more universally compatible with any component library, Not only Vant.

What's inside?

Try Vant in the Playground. Currently only Vant 3+ is supported


  • ⚡️ Vant 3+
  • ⚡️ PreLoad ImportsFile,Instantly display content(e0d5c6)
  • 🤙🏻 Free switch Vant/Vue version, and more
  • 🛠️ Rich Features
  • ☁️ Deploy on Netlify/vercel/GitHub Pages, zero-config
  • 💡 Support the Typescript
  • 😃 Easy to create your own
  • 🤩 Download project support generated package.json by user input (13ee3f)
  • 🛠️ Smarter and more efficient npm scripts

Future Features

coming soon

  • 🛠️ Support Vant dark mode
  • 🛠️ Support on-demand introduction
  • 🛠️ CLI
  • 🔑 Fully Typed API
  • 😃 Switch CDN


This SFC Playground has some additional tools already setup for you:

  • pnpm as a packages manager
  • TypeScript for static type checking
  • ESLint for code linting
  • Prettier for code formatting
  • Vant a Lightweight Mobile UI Components built on Vue
  • @vue/repl for Vue SFC REPL as a Vue 3 component

Get Started

  1. Click Use this template, and clone your repo degit https://github.com/zhixiaoqiang/sfc-playground-vant#main or git clone https://github.com/zhixiaoqiang/sfc-playground-vant --depth 1. degit
  2. Adjust the following files.
├── components
│   └── npm-version-switch
│       ├── helps.ts # add version switch feature
├── config.ts # config welcome code、CDN、additionalFiles...
├── store.ts # includes base functions...

then it'll be your repository totally.


To build the playground, run the following command:

pnpm build


To develop the playground, run the following command:

pnpm dev

Create Changelog

  1. Execute pnpm changeset to add a changeset.
  2. Execute pnpm changeset version to change CHANGELOG.md.
  3. Execute pnpm changeset publish to publish npm library. [can skip]
  4. Execute git commit, this command will trigger lint-staged and commitzen.
  5. Execute git push to trigger Github Actions or vercel Deploy


Please refer to CHANGELOG for details.

Inspired by Evan You's Vue SFC Playground




Try Vant in the Playground. Currently only Vant 3+ is supported


License:MIT License


Language:TypeScript 42.5%Language:Vue 29.8%Language:JavaScript 24.7%Language:HTML 2.7%Language:Shell 0.3%