- Learn Preact
+
+ Vite + Preact
+
+
+
+ Edit src/app.tsx
and save to test HMR
+
+
+
+ Click on the Vite and Preact logos to learn more
>
)
diff --git a/packages/create-vite/template-preact-ts/src/assets/preact.svg b/packages/create-vite/template-preact-ts/src/assets/preact.svg
new file mode 100644
index 00000000000000..908f17def0b5a4
--- /dev/null
+++ b/packages/create-vite/template-preact-ts/src/assets/preact.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-preact-ts/src/favicon.svg b/packages/create-vite/template-preact-ts/src/favicon.svg
deleted file mode 100644
index de4aeddc12bdfe..00000000000000
--- a/packages/create-vite/template-preact-ts/src/favicon.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
diff --git a/packages/create-vite/template-preact-ts/src/index.css b/packages/create-vite/template-preact-ts/src/index.css
index 3d36f1648343ec..dbc2fdd562ab3b 100644
--- a/packages/create-vite/template-preact-ts/src/index.css
+++ b/packages/create-vite/template-preact-ts/src/index.css
@@ -1,30 +1,69 @@
-html,
-body {
- height: 100%;
- width: 100%;
- padding: 0;
- margin: 0;
- background: #fafafa;
- font-family: 'Helvetica Neue', arial, sans-serif;
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
font-weight: 400;
- color: #444;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
}
-* {
- box-sizing: border-box;
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
}
-#app {
- height: 100%;
- text-align: center;
- background-color: #673ab8;
- color: #fff;
- font-size: 1.5em;
- padding-top: 100px;
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
}
-.link {
- color: #fff;
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
}
diff --git a/packages/create-vite/template-preact-ts/src/logo.tsx b/packages/create-vite/template-preact-ts/src/logo.tsx
deleted file mode 100644
index dee6f347a90a54..00000000000000
--- a/packages/create-vite/template-preact-ts/src/logo.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-export const Logo = () => (
-
-)
diff --git a/packages/create-vite/template-preact/index.html b/packages/create-vite/template-preact/index.html
index c06e9fce67a28f..9f89c1bcc0ddef 100644
--- a/packages/create-vite/template-preact/index.html
+++ b/packages/create-vite/template-preact/index.html
@@ -2,9 +2,9 @@
-
+
- Vite App
+ Vite + Preact
diff --git a/packages/create-vite/template-preact/public/vite.svg b/packages/create-vite/template-preact/public/vite.svg
new file mode 100644
index 00000000000000..e7b8dfb1b2a60b
--- /dev/null
+++ b/packages/create-vite/template-preact/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-preact/src/app.css b/packages/create-vite/template-preact/src/app.css
new file mode 100644
index 00000000000000..9e9f9c9c6884c9
--- /dev/null
+++ b/packages/create-vite/template-preact/src/app.css
@@ -0,0 +1,22 @@
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
diff --git a/packages/create-vite/template-preact/src/app.jsx b/packages/create-vite/template-preact/src/app.jsx
index 64fe3eda94c933..c2ce201061e5bd 100644
--- a/packages/create-vite/template-preact/src/app.jsx
+++ b/packages/create-vite/template-preact/src/app.jsx
@@ -1,19 +1,32 @@
-import { Logo } from './logo'
+import { useState } from 'preact/hooks'
+import viteLogo from '/vite.svg'
+import preactLogo from './assets/preact.svg'
+import './app.css'
export function App() {
+ const [count, setCount] = useState(0)
+
return (
<>
-
- Hello Vite + Preact!
-
-
- Learn Preact
+
+ Vite + Preact
+
+
+
+ Edit src/app.jsx
and save to test HMR
+
+
+
+ Click on the Vite and Preact logos to learn more
>
)
diff --git a/packages/create-vite/template-preact/src/assets/preact.svg b/packages/create-vite/template-preact/src/assets/preact.svg
new file mode 100644
index 00000000000000..908f17def0b5a4
--- /dev/null
+++ b/packages/create-vite/template-preact/src/assets/preact.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-preact/src/favicon.svg b/packages/create-vite/template-preact/src/favicon.svg
deleted file mode 100644
index de4aeddc12bdfe..00000000000000
--- a/packages/create-vite/template-preact/src/favicon.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
diff --git a/packages/create-vite/template-preact/src/index.css b/packages/create-vite/template-preact/src/index.css
index 3d36f1648343ec..dbc2fdd562ab3b 100644
--- a/packages/create-vite/template-preact/src/index.css
+++ b/packages/create-vite/template-preact/src/index.css
@@ -1,30 +1,69 @@
-html,
-body {
- height: 100%;
- width: 100%;
- padding: 0;
- margin: 0;
- background: #fafafa;
- font-family: 'Helvetica Neue', arial, sans-serif;
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
font-weight: 400;
- color: #444;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
}
-* {
- box-sizing: border-box;
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
}
-#app {
- height: 100%;
- text-align: center;
- background-color: #673ab8;
- color: #fff;
- font-size: 1.5em;
- padding-top: 100px;
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
}
-.link {
- color: #fff;
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
}
diff --git a/packages/create-vite/template-preact/src/logo.jsx b/packages/create-vite/template-preact/src/logo.jsx
deleted file mode 100644
index dee6f347a90a54..00000000000000
--- a/packages/create-vite/template-preact/src/logo.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-export const Logo = () => (
-
-)
diff --git a/packages/create-vite/template-react-ts/index.html b/packages/create-vite/template-react-ts/index.html
index 38f386110323c3..e0d1c840806ee7 100644
--- a/packages/create-vite/template-react-ts/index.html
+++ b/packages/create-vite/template-react-ts/index.html
@@ -2,9 +2,9 @@
-
+
- Vite App
+ Vite + React + TS
diff --git a/packages/create-vite/template-react-ts/public/vite.svg b/packages/create-vite/template-react-ts/public/vite.svg
new file mode 100644
index 00000000000000..e7b8dfb1b2a60b
--- /dev/null
+++ b/packages/create-vite/template-react-ts/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-react-ts/src/App.css b/packages/create-vite/template-react-ts/src/App.css
index 8da3fde63d9e7d..2e82675c3c44a9 100644
--- a/packages/create-vite/template-react-ts/src/App.css
+++ b/packages/create-vite/template-react-ts/src/App.css
@@ -1,34 +1,19 @@
-.App {
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
text-align: center;
}
-.App-logo {
- height: 40vmin;
- pointer-events: none;
+.logo {
+ height: 6em;
+ padding: 1.5em;
}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
}
-@keyframes App-logo-spin {
+@keyframes logo-spin {
from {
transform: rotate(0deg);
}
@@ -37,6 +22,16 @@
}
}
-button {
- font-size: calc(10px + 2vmin);
+@media (prefers-reduced-motion: no-preference) {
+ a:nth-of-type(2) .logo {
+ animation: logo-spin infinite 20s linear;
+ }
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
}
diff --git a/packages/create-vite/template-react-ts/src/App.tsx b/packages/create-vite/template-react-ts/src/App.tsx
index 3d9bd71e51303e..8cfb82d3fbf3c2 100644
--- a/packages/create-vite/template-react-ts/src/App.tsx
+++ b/packages/create-vite/template-react-ts/src/App.tsx
@@ -1,5 +1,6 @@
import { useState } from 'react'
-import logo from './logo.svg'
+import viteLogo from '/vite.svg'
+import reactLogo from './assets/react.svg'
import './App.css'
function App() {
@@ -7,37 +8,26 @@ function App() {
return (
-
-
- Hello Vite + React!
+
+ Vite + React
+
+
-
+ Edit src/App.tsx
and save to test HMR
-
- Edit App.tsx
and save to test HMR updates.
-
-
-
- Learn React
-
- {' | '}
-
- Vite Docs
-
-
-
+
+
+ Click on the Vite and React logos to learn more
+
)
}
diff --git a/packages/create-vite/template-react-ts/src/assets/react.svg b/packages/create-vite/template-react-ts/src/assets/react.svg
new file mode 100644
index 00000000000000..6c87de9bb33584
--- /dev/null
+++ b/packages/create-vite/template-react-ts/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-react-ts/src/favicon.svg b/packages/create-vite/template-react-ts/src/favicon.svg
deleted file mode 100644
index de4aeddc12bdfe..00000000000000
--- a/packages/create-vite/template-react-ts/src/favicon.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
diff --git a/packages/create-vite/template-react-ts/src/index.css b/packages/create-vite/template-react-ts/src/index.css
index ec2585e8c0bb81..dbc2fdd562ab3b 100644
--- a/packages/create-vite/template-react-ts/src/index.css
+++ b/packages/create-vite/template-react-ts/src/index.css
@@ -1,13 +1,69 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
}
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
}
diff --git a/packages/create-vite/template-react-ts/src/logo.svg b/packages/create-vite/template-react-ts/src/logo.svg
deleted file mode 100644
index 6b60c1042f58d9..00000000000000
--- a/packages/create-vite/template-react-ts/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/packages/create-vite/template-react/index.html b/packages/create-vite/template-react/index.html
index b46ab83364e374..79c470191164e9 100644
--- a/packages/create-vite/template-react/index.html
+++ b/packages/create-vite/template-react/index.html
@@ -2,9 +2,9 @@
-
+
- Vite App
+ Vite + React
diff --git a/packages/create-vite/template-react/public/vite.svg b/packages/create-vite/template-react/public/vite.svg
new file mode 100644
index 00000000000000..e7b8dfb1b2a60b
--- /dev/null
+++ b/packages/create-vite/template-react/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-react/src/App.css b/packages/create-vite/template-react/src/App.css
index 8da3fde63d9e7d..2e82675c3c44a9 100644
--- a/packages/create-vite/template-react/src/App.css
+++ b/packages/create-vite/template-react/src/App.css
@@ -1,34 +1,19 @@
-.App {
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
text-align: center;
}
-.App-logo {
- height: 40vmin;
- pointer-events: none;
+.logo {
+ height: 6em;
+ padding: 1.5em;
}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
}
-@keyframes App-logo-spin {
+@keyframes logo-spin {
from {
transform: rotate(0deg);
}
@@ -37,6 +22,16 @@
}
}
-button {
- font-size: calc(10px + 2vmin);
+@media (prefers-reduced-motion: no-preference) {
+ a:nth-of-type(2) .logo {
+ animation: logo-spin infinite 20s linear;
+ }
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
}
diff --git a/packages/create-vite/template-react/src/App.jsx b/packages/create-vite/template-react/src/App.jsx
index 7d4eb10ff833d1..78ced9c794224d 100644
--- a/packages/create-vite/template-react/src/App.jsx
+++ b/packages/create-vite/template-react/src/App.jsx
@@ -1,5 +1,6 @@
import { useState } from 'react'
-import logo from './logo.svg'
+import viteLogo from '/vite.svg'
+import reactLogo from './assets/react.svg'
import './App.css'
function App() {
@@ -7,37 +8,26 @@ function App() {
return (
-
-
- Hello Vite + React!
+
+ Vite + React
+
+
-
+ Edit src/App.jsx
and save to test HMR
-
- Edit App.jsx
and save to test HMR updates.
-
-
-
- Learn React
-
- {' | '}
-
- Vite Docs
-
-
-
+
+
+ Click on the Vite and React logos to learn more
+
)
}
diff --git a/packages/create-vite/template-react/src/assets/react.svg b/packages/create-vite/template-react/src/assets/react.svg
new file mode 100644
index 00000000000000..6c87de9bb33584
--- /dev/null
+++ b/packages/create-vite/template-react/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-react/src/favicon.svg b/packages/create-vite/template-react/src/favicon.svg
deleted file mode 100644
index de4aeddc12bdfe..00000000000000
--- a/packages/create-vite/template-react/src/favicon.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
diff --git a/packages/create-vite/template-react/src/index.css b/packages/create-vite/template-react/src/index.css
index ec2585e8c0bb81..dbc2fdd562ab3b 100644
--- a/packages/create-vite/template-react/src/index.css
+++ b/packages/create-vite/template-react/src/index.css
@@ -1,13 +1,69 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
}
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
}
diff --git a/packages/create-vite/template-react/src/logo.svg b/packages/create-vite/template-react/src/logo.svg
deleted file mode 100644
index 6b60c1042f58d9..00000000000000
--- a/packages/create-vite/template-react/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/packages/create-vite/template-svelte-ts/index.html b/packages/create-vite/template-svelte-ts/index.html
index d2f6839bab176c..b5b125269662aa 100644
--- a/packages/create-vite/template-svelte-ts/index.html
+++ b/packages/create-vite/template-svelte-ts/index.html
@@ -2,9 +2,9 @@
-
+
- Svelte + TS + Vite App
+ Vite + Svelte + TS
diff --git a/packages/create-vite/template-svelte-ts/public/favicon.ico b/packages/create-vite/template-svelte-ts/public/favicon.ico
deleted file mode 100644
index d75d248ef0b150..00000000000000
Binary files a/packages/create-vite/template-svelte-ts/public/favicon.ico and /dev/null differ
diff --git a/packages/create-vite/template-svelte-ts/public/vite.svg b/packages/create-vite/template-svelte-ts/public/vite.svg
new file mode 100644
index 00000000000000..e7b8dfb1b2a60b
--- /dev/null
+++ b/packages/create-vite/template-svelte-ts/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-svelte-ts/src/App.svelte b/packages/create-vite/template-svelte-ts/src/App.svelte
index 4023b8b9774246..cc0917872ad18e 100644
--- a/packages/create-vite/template-svelte-ts/src/App.svelte
+++ b/packages/create-vite/template-svelte-ts/src/App.svelte
@@ -1,65 +1,42 @@
-
- Hello Typescript!
-
-
+
+ Vite + Svelte
+
+
+
+
- Visit svelte.dev to learn how to build Svelte
- apps.
+ Check out SvelteKit, the official Svelte app framework powered by Vite!
-
- Check out SvelteKit for
- the officially supported framework, also powered by Vite!
+
+ Click on the Vite and Svelte logos to learn more
+
\ No newline at end of file
diff --git a/packages/create-vite/template-svelte-ts/src/app.css b/packages/create-vite/template-svelte-ts/src/app.css
new file mode 100644
index 00000000000000..07396c895cc09e
--- /dev/null
+++ b/packages/create-vite/template-svelte-ts/src/app.css
@@ -0,0 +1,80 @@
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+}
+
+.card {
+ padding: 2em;
+}
+
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/packages/create-vite/template-svelte-ts/src/assets/svelte.png b/packages/create-vite/template-svelte-ts/src/assets/svelte.png
deleted file mode 100644
index e673c91c7bcb0e..00000000000000
Binary files a/packages/create-vite/template-svelte-ts/src/assets/svelte.png and /dev/null differ
diff --git a/packages/create-vite/template-svelte-ts/src/assets/svelte.svg b/packages/create-vite/template-svelte-ts/src/assets/svelte.svg
new file mode 100644
index 00000000000000..c5e08481f8aede
--- /dev/null
+++ b/packages/create-vite/template-svelte-ts/src/assets/svelte.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-svelte-ts/src/lib/Counter.svelte b/packages/create-vite/template-svelte-ts/src/lib/Counter.svelte
index b8e7524c2232aa..979b4dfc91c86e 100644
--- a/packages/create-vite/template-svelte-ts/src/lib/Counter.svelte
+++ b/packages/create-vite/template-svelte-ts/src/lib/Counter.svelte
@@ -6,29 +6,5 @@
-
-
diff --git a/packages/create-vite/template-svelte-ts/src/main.ts b/packages/create-vite/template-svelte-ts/src/main.ts
index d8200ac4fe3078..5c1f795f9f55a6 100644
--- a/packages/create-vite/template-svelte-ts/src/main.ts
+++ b/packages/create-vite/template-svelte-ts/src/main.ts
@@ -1,3 +1,4 @@
+import './app.css'
import App from './App.svelte'
const app = new App({
diff --git a/packages/create-vite/template-svelte/index.html b/packages/create-vite/template-svelte/index.html
index 4a3886b62cf793..26c29c45b2689e 100644
--- a/packages/create-vite/template-svelte/index.html
+++ b/packages/create-vite/template-svelte/index.html
@@ -2,9 +2,9 @@
-
+
- Svelte + Vite App
+ Vite + Svelte
diff --git a/packages/create-vite/template-svelte/public/favicon.ico b/packages/create-vite/template-svelte/public/favicon.ico
deleted file mode 100644
index d75d248ef0b150..00000000000000
Binary files a/packages/create-vite/template-svelte/public/favicon.ico and /dev/null differ
diff --git a/packages/create-vite/template-svelte/public/vite.svg b/packages/create-vite/template-svelte/public/vite.svg
new file mode 100644
index 00000000000000..e7b8dfb1b2a60b
--- /dev/null
+++ b/packages/create-vite/template-svelte/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-svelte/src/App.svelte b/packages/create-vite/template-svelte/src/App.svelte
index 90ca0665a7416a..a5a4f8caab6977 100644
--- a/packages/create-vite/template-svelte/src/App.svelte
+++ b/packages/create-vite/template-svelte/src/App.svelte
@@ -1,65 +1,42 @@
-
- Hello world!
-
-
+
+ Vite + Svelte
+
+
+
+
- Visit svelte.dev to learn how to build Svelte
- apps.
+ Check out SvelteKit, the official Svelte app framework powered by Vite!
-
- Check out SvelteKit for
- the officially supported framework, also powered by Vite!
+
+ Click on the Vite and Svelte logos to learn more
diff --git a/packages/create-vite/template-svelte/src/app.css b/packages/create-vite/template-svelte/src/app.css
new file mode 100644
index 00000000000000..07396c895cc09e
--- /dev/null
+++ b/packages/create-vite/template-svelte/src/app.css
@@ -0,0 +1,80 @@
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+}
+
+.card {
+ padding: 2em;
+}
+
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/packages/create-vite/template-svelte/src/assets/svelte.png b/packages/create-vite/template-svelte/src/assets/svelte.png
deleted file mode 100644
index e673c91c7bcb0e..00000000000000
Binary files a/packages/create-vite/template-svelte/src/assets/svelte.png and /dev/null differ
diff --git a/packages/create-vite/template-svelte/src/assets/svelte.svg b/packages/create-vite/template-svelte/src/assets/svelte.svg
new file mode 100644
index 00000000000000..c5e08481f8aede
--- /dev/null
+++ b/packages/create-vite/template-svelte/src/assets/svelte.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-svelte/src/lib/Counter.svelte b/packages/create-vite/template-svelte/src/lib/Counter.svelte
index 37a92cbf4bbd10..e45f903109790d 100644
--- a/packages/create-vite/template-svelte/src/lib/Counter.svelte
+++ b/packages/create-vite/template-svelte/src/lib/Counter.svelte
@@ -6,29 +6,5 @@
-
-
diff --git a/packages/create-vite/template-svelte/src/main.js b/packages/create-vite/template-svelte/src/main.js
index d8200ac4fe3078..5c1f795f9f55a6 100644
--- a/packages/create-vite/template-svelte/src/main.js
+++ b/packages/create-vite/template-svelte/src/main.js
@@ -1,3 +1,4 @@
+import './app.css'
import App from './App.svelte'
const app = new App({
diff --git a/packages/create-vite/template-vanilla-ts/index.html b/packages/create-vite/template-vanilla-ts/index.html
index 867581c5124fa1..f86e483c942e8d 100644
--- a/packages/create-vite/template-vanilla-ts/index.html
+++ b/packages/create-vite/template-vanilla-ts/index.html
@@ -2,9 +2,9 @@
-
+
- Vite App
+ Vite + TS
diff --git a/packages/create-vite/template-vanilla-ts/public/vite.svg b/packages/create-vite/template-vanilla-ts/public/vite.svg
new file mode 100644
index 00000000000000..e7b8dfb1b2a60b
--- /dev/null
+++ b/packages/create-vite/template-vanilla-ts/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-vanilla-ts/src/counter.ts b/packages/create-vite/template-vanilla-ts/src/counter.ts
new file mode 100644
index 00000000000000..a3529e1f26bfc8
--- /dev/null
+++ b/packages/create-vite/template-vanilla-ts/src/counter.ts
@@ -0,0 +1,9 @@
+export function setupCounter(element: HTMLButtonElement) {
+ let counter = 0
+ const setCounter = (count: number) => {
+ counter = count
+ element.innerHTML = `count is ${counter}`
+ }
+ element.addEventListener('click', () => setCounter(++counter))
+ setCounter(0)
+}
diff --git a/packages/create-vite/template-vanilla-ts/src/main.ts b/packages/create-vite/template-vanilla-ts/src/main.ts
index f77db7a8fcab13..8dd51bd53cd550 100644
--- a/packages/create-vite/template-vanilla-ts/src/main.ts
+++ b/packages/create-vite/template-vanilla-ts/src/main.ts
@@ -1,8 +1,20 @@
import './style.css'
+import viteLogo from '/vite.svg'
+import typescriptLogo from './typescript.svg'
+import { setupCounter } from './counter'
-const app = document.querySelector('#app')!
-
-app.innerHTML = `
- Hello Vite!
- Documentation
+document.querySelector('#app')!.innerHTML = `
+
+
![Vite logo](${viteLogo})
+
![TypeScript logo](${typescriptLogo})
+
Vite + TypeScript
+
+
+
+
+ Click on the Vite and TypeScript logos to learn more
+
+
`
+
+setupCounter(document.querySelector('#counter')!)
diff --git a/packages/create-vite/template-vanilla-ts/src/style.css b/packages/create-vite/template-vanilla-ts/src/style.css
index 852de7aa2ae573..b99c9e8fa9d8d9 100644
--- a/packages/create-vite/template-vanilla-ts/src/style.css
+++ b/packages/create-vite/template-vanilla-ts/src/style.css
@@ -1,8 +1,92 @@
-#app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+}
+
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
text-align: center;
- color: #2c3e50;
- margin-top: 60px;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
}
diff --git a/packages/create-vite/template-vanilla-ts/src/typescript.svg b/packages/create-vite/template-vanilla-ts/src/typescript.svg
new file mode 100644
index 00000000000000..d91c910cc30bf4
--- /dev/null
+++ b/packages/create-vite/template-vanilla-ts/src/typescript.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-vanilla/counter.js b/packages/create-vite/template-vanilla/counter.js
new file mode 100644
index 00000000000000..12ae65abfaea09
--- /dev/null
+++ b/packages/create-vite/template-vanilla/counter.js
@@ -0,0 +1,9 @@
+export function setupCounter(element) {
+ let counter = 0
+ const setCounter = (count) => {
+ counter = count
+ element.innerHTML = `count is ${counter}`
+ }
+ element.addEventListener('click', () => setCounter(++counter))
+ setCounter(0)
+}
diff --git a/packages/create-vite/template-vanilla/favicon.svg b/packages/create-vite/template-vanilla/favicon.svg
deleted file mode 100644
index de4aeddc12bdfe..00000000000000
--- a/packages/create-vite/template-vanilla/favicon.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
diff --git a/packages/create-vite/template-vanilla/index.html b/packages/create-vite/template-vanilla/index.html
index f1dedb52dba233..2ad7b1ab9e691d 100644
--- a/packages/create-vite/template-vanilla/index.html
+++ b/packages/create-vite/template-vanilla/index.html
@@ -2,7 +2,7 @@
-
+
Vite App
diff --git a/packages/create-vite/template-vanilla/javascript.svg b/packages/create-vite/template-vanilla/javascript.svg
new file mode 100644
index 00000000000000..f9abb2b728d73b
--- /dev/null
+++ b/packages/create-vite/template-vanilla/javascript.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-vanilla/main.js b/packages/create-vite/template-vanilla/main.js
index 4c0070f03c7ba0..35c67ecd6283eb 100644
--- a/packages/create-vite/template-vanilla/main.js
+++ b/packages/create-vite/template-vanilla/main.js
@@ -1,6 +1,20 @@
import './style.css'
+import viteLogo from '/vite.svg'
+import javascriptLogo from './javascript.svg'
+import { setupCounter } from './counter.js'
document.querySelector('#app').innerHTML = `
- Hello Vite!
- Documentation
+
+
![Vite logo](${viteLogo})
+
![JavaScript logo](${javascriptLogo})
+
Hello Vite!
+
+
+
+
+ Click on the Vite logo to learn more
+
+
`
+
+setupCounter(document.querySelector('#counter'))
diff --git a/packages/create-vite/template-vanilla/public/vite.svg b/packages/create-vite/template-vanilla/public/vite.svg
new file mode 100644
index 00000000000000..e7b8dfb1b2a60b
--- /dev/null
+++ b/packages/create-vite/template-vanilla/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-vanilla/style.css b/packages/create-vite/template-vanilla/style.css
index 852de7aa2ae573..b99c9e8fa9d8d9 100644
--- a/packages/create-vite/template-vanilla/style.css
+++ b/packages/create-vite/template-vanilla/style.css
@@ -1,8 +1,92 @@
-#app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+}
+
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
text-align: center;
- color: #2c3e50;
- margin-top: 60px;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
}
diff --git a/packages/create-vite/template-vue-ts/index.html b/packages/create-vite/template-vue-ts/index.html
index 11603f878f1226..143557b5286bc1 100644
--- a/packages/create-vite/template-vue-ts/index.html
+++ b/packages/create-vite/template-vue-ts/index.html
@@ -2,9 +2,9 @@
-
+
- Vite App
+ Vite + Vue + TS
diff --git a/packages/create-vite/template-vue-ts/public/favicon.ico b/packages/create-vite/template-vue-ts/public/favicon.ico
deleted file mode 100644
index df36fcfb72584e..00000000000000
Binary files a/packages/create-vite/template-vue-ts/public/favicon.ico and /dev/null differ
diff --git a/packages/create-vite/template-vue-ts/public/vite.svg b/packages/create-vite/template-vue-ts/public/vite.svg
new file mode 100644
index 00000000000000..e7b8dfb1b2a60b
--- /dev/null
+++ b/packages/create-vite/template-vue-ts/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-vue-ts/src/App.vue b/packages/create-vite/template-vue-ts/src/App.vue
index 1503baf999e683..b40827e623e6e7 100644
--- a/packages/create-vite/template-vue-ts/src/App.vue
+++ b/packages/create-vite/template-vue-ts/src/App.vue
@@ -5,17 +5,23 @@ import HelloWorld from './components/HelloWorld.vue'
-
-
+
+
-
diff --git a/packages/create-vite/template-vue-ts/src/assets/logo.png b/packages/create-vite/template-vue-ts/src/assets/logo.png
deleted file mode 100644
index f3d2503fc2a44b..00000000000000
Binary files a/packages/create-vite/template-vue-ts/src/assets/logo.png and /dev/null differ
diff --git a/packages/create-vite/template-vue-ts/src/assets/vue.svg b/packages/create-vite/template-vue-ts/src/assets/vue.svg
new file mode 100644
index 00000000000000..770e9d333ee70e
--- /dev/null
+++ b/packages/create-vite/template-vue-ts/src/assets/vue.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-vue-ts/src/components/HelloWorld.vue b/packages/create-vite/template-vue-ts/src/components/HelloWorld.vue
index 38dae70739a15a..5230910336b442 100644
--- a/packages/create-vite/template-vue-ts/src/components/HelloWorld.vue
+++ b/packages/create-vite/template-vue-ts/src/components/HelloWorld.vue
@@ -9,44 +9,30 @@ const count = ref(0)
{{ msg }}
-
- Recommended IDE setup:
- VS Code
- +
- Volar
-
-
- See README.md
for more information.
+
+
+
+ Edit
+ components/HelloWorld.vue
to test HMR
+
+
-
- Vite Docs
-
- |
- Vue 3 Docs
+ Check out
+ create-vue, the official Vue + Vite starter
-
-
- Edit
- components/HelloWorld.vue
to test hot module replacement.
+ Install
+ Volar
+ in your IDE for a better DX
+ Click on the Vite and Vue logos to learn more
diff --git a/packages/create-vite/template-vue-ts/src/main.ts b/packages/create-vite/template-vue-ts/src/main.ts
index 01433bca2ac765..2425c0f745bef4 100644
--- a/packages/create-vite/template-vue-ts/src/main.ts
+++ b/packages/create-vite/template-vue-ts/src/main.ts
@@ -1,4 +1,5 @@
import { createApp } from 'vue'
+import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
diff --git a/packages/create-vite/template-vue-ts/src/style.css b/packages/create-vite/template-vue-ts/src/style.css
new file mode 100644
index 00000000000000..6abdac306bc2c4
--- /dev/null
+++ b/packages/create-vite/template-vue-ts/src/style.css
@@ -0,0 +1,80 @@
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+ padding: 2em;
+}
+
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/packages/create-vite/template-vue/index.html b/packages/create-vite/template-vue/index.html
index 030a6ff51bfc6f..795e4fbadb8831 100644
--- a/packages/create-vite/template-vue/index.html
+++ b/packages/create-vite/template-vue/index.html
@@ -2,9 +2,9 @@
-
+
- Vite App
+ Vite + Vue
diff --git a/packages/create-vite/template-vue/public/favicon.ico b/packages/create-vite/template-vue/public/favicon.ico
deleted file mode 100644
index df36fcfb72584e..00000000000000
Binary files a/packages/create-vite/template-vue/public/favicon.ico and /dev/null differ
diff --git a/packages/create-vite/template-vue/public/vite.svg b/packages/create-vite/template-vue/public/vite.svg
new file mode 100644
index 00000000000000..e7b8dfb1b2a60b
--- /dev/null
+++ b/packages/create-vite/template-vue/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-vue/src/App.vue b/packages/create-vite/template-vue/src/App.vue
index 09bbb6a561285f..ddb1b007bc3604 100644
--- a/packages/create-vite/template-vue/src/App.vue
+++ b/packages/create-vite/template-vue/src/App.vue
@@ -5,17 +5,23 @@ import HelloWorld from './components/HelloWorld.vue'
-
-
+
+
-
diff --git a/packages/create-vite/template-vue/src/assets/logo.png b/packages/create-vite/template-vue/src/assets/logo.png
deleted file mode 100644
index f3d2503fc2a44b..00000000000000
Binary files a/packages/create-vite/template-vue/src/assets/logo.png and /dev/null differ
diff --git a/packages/create-vite/template-vue/src/assets/vue.svg b/packages/create-vite/template-vue/src/assets/vue.svg
new file mode 100644
index 00000000000000..770e9d333ee70e
--- /dev/null
+++ b/packages/create-vite/template-vue/src/assets/vue.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-vite/template-vue/src/components/HelloWorld.vue b/packages/create-vite/template-vue/src/components/HelloWorld.vue
index aa607e31e0ad7c..91f9bfcbcb305d 100644
--- a/packages/create-vite/template-vue/src/components/HelloWorld.vue
+++ b/packages/create-vite/template-vue/src/components/HelloWorld.vue
@@ -11,30 +11,30 @@ const count = ref(0)
{{ msg }}
-
- Recommended IDE setup:
- VS Code
- +
- Volar
-
+
+
+
+ Edit
+ components/HelloWorld.vue
to test HMR
+
+
-
- Vite Documentation
-
- |
- Vue 3 Documentation
+ Check out
+ create-vue, the official Vue + Vite starter
-
-
- Edit
- components/HelloWorld.vue
to test hot module replacement.
+ Install
+ Volar
+ in your IDE for a better DX
+ Click on the Vite and Vue logos to learn more
diff --git a/packages/create-vite/template-vue/src/main.js b/packages/create-vite/template-vue/src/main.js
index 01433bca2ac765..2425c0f745bef4 100644
--- a/packages/create-vite/template-vue/src/main.js
+++ b/packages/create-vite/template-vue/src/main.js
@@ -1,4 +1,5 @@
import { createApp } from 'vue'
+import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
diff --git a/packages/create-vite/template-vue/src/style.css b/packages/create-vite/template-vue/src/style.css
new file mode 100644
index 00000000000000..62b04c13f8df74
--- /dev/null
+++ b/packages/create-vite/template-vue/src/style.css
@@ -0,0 +1,89 @@
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+ padding: 2em;
+}
+
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}