• Stars
    star
    370
  • Rank 115,405 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 2 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Extra Vite templates

create-vite-extra

Scaffolding Your First Vite Project

Compatibility Note: Vite requires Node.js version 14.18+, 16+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.

With NPM:

$ npm create vite-extra@latest

With Yarn:

$ yarn create vite-extra

With PNPM:

$ pnpm create vite-extra

With Deno:

$ deno run -A npm:create-vite-extra

Then follow the prompts!

You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + SSR + Vue project, run:

# npm
npm create vite-extra@latest my-vue-app -- --template ssr-vue

# yarn
yarn create vite-extra my-vue-app --template ssr-vue

# pnpm
pnpm create vite-extra my-vue-app --template ssr-vue

# Deno
deno run -A npm:create-vite-extra --template deno-vue

Currently supported template presets include:

Template Try online
ssr-vanilla StackBlitz
ssr-vanilla-ts StackBlitz
ssr-vue StackBlitz
ssr-vue-ts StackBlitz
ssr-react StackBlitz
ssr-react-ts StackBlitz
ssr-react-swc
ssr-react-swc-ts
ssr-preact StackBlitz
ssr-preact-ts StackBlitz
ssr-svelte StackBlitz
ssr-svelte-ts StackBlitz
deno-vanilla
deno-vanilla-ts
deno-vue
deno-vue-ts
deno-react
deno-react-ts
deno-react-swc
deno-react-swc-ts
deno-preact
deno-preact-ts
deno-lit
deno-lit-ts
deno-svelte
deno-svelte-ts
library StackBlitz
library-ts StackBlitz
ssr-transform StackBlitz

You can use . for the project name to scaffold in the current directory.

Community Templates

create-vite-extra is a tool to quickly start a project from a basic template for popular frameworks. Check out Awesome Vite for community maintained templates that include other tools or target different frameworks. You can use a tool like degit to scaffold your project with one of the templates.

npx degit user/project my-project
cd my-project

npm install
npm run dev

If the project uses main as the default branch, suffix the project repo with #main

npx degit user/project#main my-project

Attribution

This project is originally a fork of create-vite. Credit goes to all of it's contributors.

More Repositories

1

publint

Lint packaging errors
JavaScript
953
star
2

whyframe

Develop components in isolation with just an iframe
JavaScript
536
star
3

vite-plugin-warmup

Warm up Vite's transform cache
JavaScript
220
star
4

svelte-preprocess-import-assets

Import assets directly in your markup
JavaScript
91
star
5

ihimnm

JavaScript
80
star
6

vite-plugin-iso-import

Import modules isomorphically in the client or server
JavaScript
74
star
7

bun-vite-ts-test

How far can we get with bun 👀
CSS
62
star
8

renoma

A recursive node modules analyzer with opinionated package health checks
JavaScript
55
star
9

svelte-fast-dimension

Fast dimension bindings using ResizeObserver
JavaScript
40
star
10

svelte-router

An easy-to-use SPA router for Svelte
TypeScript
32
star
11

svelte-url

Barebones routing with reactive URLs
JavaScript
27
star
12

LuaTween-for-Rainmeter

Animate stuff in Rainmeter easily
Lua
24
star
13

refined-github-comments

JavaScript
24
star
14

fmu

A collection of JS module utilities written in Rust
Rust
21
star
15

pick-palette

A color palette manager made with Svelte
Svelte
19
star
16

package-library

Vue
16
star
17

colorblind

A zero-dependencies color blindness simulation library
TypeScript
15
star
18

svelte-motion

Experimental web animations support for Svelte transitions
Svelte
14
star
19

substitute-string-action

🚀️ Easily substitute or replace strings in GitHub Actions using YAML
JavaScript
14
star
20

release-for-reddit-action

🚀️ Submit a Reddit post about your release in GitHub Actions
JavaScript
14
star
21

website

Svelte
11
star
22

svelte-js-in-css

Svelte
7
star
23

svelte-parse-markup

Parse Svelte markup without parsing the script or style tags
JavaScript
6
star
24

svelte-view-source

Svelte
5
star
25

tailwind-color-gen

Yet another Tailwind color palette generator
Vue
5
star
26

astro-pages-hmr

Support HMR in pages in Astro
Astro
5
star
27

sponsors

A zero-dependencies script to generate sponsors SVG from Patreon
JavaScript
4
star
28

cloudflare-lit-ssr-repro

JavaScript
3
star
29

material-shadow-preview

Visualize Material Design's elevations and generate CSS!
Vue
3
star
30

svelte-as-markup-preprocessor

Runs script and style preprocessors in the markup phase.
TypeScript
3
star
31

vite-plugin-cloudflare-redirect

Vite plugin to handle Cloudflare's _redirects file
JavaScript
3
star
32

cleanup

JavaScript
2
star
33

timetable

A timetable for personal use
Vue
1
star
34

astro-cdn-test

Astro
1
star
35

penn-todo

A todo app built on the PENN stack
JavaScript
1
star
36

svelte-preprocess-inline-logic

JavaScript
1
star
37

Rainmeter-Tron-Suite

A Tron-inspired Rainmeter suite
Lua
1
star
38

kit-iso-import

Svelte
1
star
39

trailing-slash-servers

See how different servers handle serving HTML files and trailing slashes
JavaScript
1
star