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

Overview

SFC Playground with Vant

This is an Vant SFC Playground. Detail vercel.app Or zhixiaoqiang.github.io

main-pic

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

Features

  • โšก๏ธ Vant 3+
  • ๐Ÿค™๐Ÿป 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)

Future Features

coming soon

  • ๐Ÿ› ๏ธ Support Vant dark mode
  • ๐Ÿ› ๏ธ Support on-demand introduction
  • ๐Ÿ› ๏ธ CLI
  • ๐Ÿ”‘ Fully Typed API
  • ๐Ÿ˜ƒ Switch CDN

Utilities

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 git clone https://github.com/zhixiaoqiang/sfc-playground-vant --depth 1.
  2. config src/config.tsใ€src/store.ts and src/components/npm-version-switch/helps.ts.

then it'll be your repository totally.

Build

To build the playground, run the following command:

pnpm build

Develop

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

CHANGELOG

Please refer to CHANGELOG for details.

License

MIT

Comments
Releases(v1.0.15)
A Nuxt.js module that injects a server route to serve the GraphQL Playground

@pin-pon/nuxt-graphql-playground A Nuxt.js module that injects a server route to serve the GraphQL Playground Setup Add @pin-pon/nuxt-graphql-playgrou

Pin-Pon 3 Sep 22, 2022
Jenesius vue modal is simple library for Vue 3 only

Jenesius Vue Modal Jenesius vue modal is simple library for Vue 3 only . Site Documentation Installation npm i jenesius-vue-modal For add modals in yo

ะั€ั…ะธะฟั†ะตะฒ ะ•ะฒะณะตะฝะธะน 63 Dec 30, 2022
PDF.js Read Only is an additional readonly mode for PDF.js

PDF.js Read Only PDF.js Read Only is an additional readonly mode for PDF.js, a Portable Document Format (PDF) viewer that is built with HTML5 which is

Aprillio Latuminggi 19 Dec 22, 2022
โšก๏ธThe Fullstack React Framework โ€” built on Next.js

The Fullstack React Framework "Zero-API" Data Layer โ€” Built on Next.js โ€” Inspired by Ruby on Rails Read the Documentation โ€œZero-APIโ€ data layer lets y

โšก๏ธBlitz 12.5k Jan 4, 2023
Export HTML to word (.docx) only by browser (currently in beta) ๐ŸŽ‰

editor-to-docx Export rich-text editor content as word file (.docx) by browser ?? . English | ็ฎ€ไฝ“ไธญๆ–‡ Demo online demo Snapshot Architecture This project

han 15 Oct 21, 2022
Create Angular Dynamic Forms with only JSON configuration. Full grid layout supported.

Angular Dynamic Forms Angular component that allows the creation of dynamic forms. You can use this component in situations where you get the configur

Martin Stefanovic 27 Nov 17, 2022
A (very) minimalist creative coding playground. Make animations using only 64 HTML sliders!

Sliderland A (very) minimalist creative coding playground. Make animations using only 64 HTML sliders! Credits The recording feature uses ffmpeg.wasm

null 181 Dec 30, 2022
๐ŸŒˆ GitHub following, followers, only-following, only-follower tracker ๐ŸŒˆ

github-following-tracker GitHub following, followers, only-following, only-follower tracker ?? Just enter your GitHub name and track your followings!

Youngkwon Kim 10 Jun 15, 2022
A Javascript library for working with Audio. It provides a consistent API for loading and playing audio on different browsers and devices. Currently supports WebAudio, HTML5 Audio, Cordova / PhoneGap, and a Flash fallback.

SoundJS SoundJS is a library to make working with audio on the web easier. It provides a consistent API for playing audio in different browsers, inclu

CreateJS 4.3k Dec 31, 2022
A completely customizable framework for building rich text editors. (Currently in beta.)

A completely customizable framework for building rich text editors. Why? ยท Principles ยท Demo ยท Examples ยท Documentation ยท Contributing! Slate lets you

Ian Storm Taylor 26.2k Dec 30, 2022
now-playing: A website to show what I'm currently listening to on Spotify Run on Repl.it

now-playing: A website to show what I'm currently listening to on Spotify โ“ How does it work? This project is split into two parts - the frontend and

Connor Dennison 3 Apr 29, 2022
Might be mineral fish site in future, idk. Currently just a fish list. Made with Svelte

Might be mineral fish site in future, idk. Currently just a fish list. Made with Svelte. Built version (used at mineralfish.github.io) at the build branch. Build steps and original README below.

Mineral Fish 3 Nov 3, 2022
An extension to Panic's Nova editor currently providing an alternative file browser.

Explorer.novaextension Welcome to the repository of the Explorer Nova extension. The actual extension and its README can be found only one directory a

null 7 Nov 14, 2022
WordPress Gutenberg plugin to display the attributes for the currently selected block in the Document sidebar.

Block X-ray Attributes Stable Tag: 1.2.0 Requires at least: 5.5 Tested up to: 5.9 Requires PHP: 7.2 License: GPL v2 or later Tags: block attributes, g

Sal Ferrarello 38 Mar 18, 2022
๐Ÿ“ฝ See the movies that are currently on

FujiFlix Um site de Filmaria que apresenta alguns filmes!!! Confira a aplicaรงรฃo: https://fujiflix.netlify.app ?? Explicaรงรฃo O usuรกrio acessa a Home e

Kayke Alves Fujinaka 3 May 21, 2022
coc-pyright-tools is a coc-extension that adds its own functionality to coc-pyright for coc.nvim. Currently the "Inlay Hints", "CodeLens" and "Test Framework commands" feature is available.

coc-pyright-tools !!WARNING!! Inlay hints feature of coc-pyright-tools, have been ported to coc-pyright itself. https://github.com/fannheyward/coc-pyr

yaegassy 5 Aug 23, 2022
The interpretation implementation implemented programming language built for fun. I'm currently boring in full stack web development. So, I crafted this one LoL. ๐Ÿ‘ป

What's Wuttyi? Everything is expression ?? I just developed this tiny programming language because of boring in higher level programming construct. Mo

Aung Myat Moe 9 Dec 13, 2022
Our official website - currently at https://haidevs.alawonn.com

The Haitian Developers community website - currently at https://haidevs.alawonn.com Getting Started First, run the development server: yarn dev Open h

Haitian Developers (HaiDevs) 2 Sep 9, 2022