-
-
Notifications
You must be signed in to change notification settings - Fork 6.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: vite 6 announcement post #18738
Open
patak-dev
wants to merge
4
commits into
main
Choose a base branch
from
docs/vite6-announcement-post
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+140
−0
Open
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
<script setup> | ||
defineProps({ | ||
videoId: String, | ||
}) | ||
</script> | ||
|
||
<template> | ||
<div class="full-width-youtube-video"> | ||
<iframe | ||
width="560" | ||
height="315" | ||
:src="`https://www.youtube.com/embed/${videoId}`" | ||
title="YouTube video player" | ||
frameborder="0" | ||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | ||
allowfullscreen | ||
></iframe> | ||
</div> | ||
</template> | ||
|
||
<style scoped> | ||
.full-width-youtube-video { | ||
position: relative; | ||
padding-bottom: 56.25%; | ||
height: 0; | ||
} | ||
.full-width-youtube-video iframe { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
border: none; | ||
border-radius: 0.5rem; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
--- | ||
title: Vite 6.0 is out! | ||
author: | ||
name: The Vite Team | ||
date: 2024-11-26 | ||
sidebar: false | ||
head: | ||
- - meta | ||
- property: og:type | ||
content: website | ||
- - meta | ||
- property: og:title | ||
content: Announcing Vite 6 | ||
- - meta | ||
- property: og:image | ||
content: https://vite.dev/og-image-announcing-vite6.png | ||
- - meta | ||
- property: og:url | ||
content: https://vite.dev/blog/announcing-vite6 | ||
- - meta | ||
- property: og:description | ||
content: Vite 6 Release Announcement | ||
- - meta | ||
- name: twitter:card | ||
content: summary_large_image | ||
--- | ||
|
||
# Vite 6.0 is out! | ||
|
||
_November 26, 2024_ | ||
|
||
![Vite 6 Announcement Cover Image](/og-image-announcing-vite6.png) | ||
|
||
It has been an eventful year. Vite adoption keeps growing, with npm downloads per week jumping from 7.5 million to 16 million since the release of Vite 5 a year ago. [Vitest](https://vitest.dev) is not only being chosen by final users but is also starting to form an ecosystem of its own. For example, [Storybook](https://storybook.js.org) has new testing capabilities powered by Vitest. New frameworks have joined the Vite ecosystem. Among others: [TanStack Start](https://tanstack.com/start), [One](https://onestack.dev/), [Ember](https://emberjs.com/). Web frameworks are innovating at an increasingly faster pace. You can check out the improvements folks have been doing at [Astro](https://astro.build/), [Nuxt](https://nuxt.com/), [SvelteKit](https://kit.svelte.dev/), [Solid Start](https://www.solidjs.com/blog/introducing-solidstart), [Qwik City](https://qwik.builder.io/qwikcity/overview/), [RedwoodJS](https://redwoodjs.com/), [Remix](https://remix.run/), and the list goes on. | ||
|
||
## Speeding up the Vite ecosystem | ||
|
||
Last month, the community gathered for the third edition of [ViteConf](https://viteconf.org/24/replay), hosted once more by [StackBlitz](https://stackblitz.com). It was the biggest Vite Conference, with a broad representation of builders from the Ecosystem. Among other announcements, Evan You announced [VoidZero](https://staging.voidzero.dev/posts/announcing-voidzero-inc), a company dedicated to building an open-source, high-performance, and unified development toolchain for the JavaScript ecosystem. VoidZero is behind [Rolldown](https://rolldown.rs) and [Oxc](https://oxc.rs), and their team is making significant strides, getting them rapidly ready for being adopted by Vite. Watch Evan's keynote to learn more about the next steps for Vite's rust-powered future. | ||
|
||
<YouTubeVideo videoId="EKvvptbTx6k?si=EZ-rFJn4pDW3tUvp" /> | ||
|
||
[Stackblitz](https://stackblitz.com) unveiled [bolt.new](https://bolt.new), a Remix app that combines Claude and WebContainers and lets you prompt, edit, run, and deploy full-stack apps. Nate Weiner announced [One](https://onestack.dev/), a new Vite-powered React framework for web and native. Storybook showcased their latest Vitest-powered [testing features](https://youtu.be/8t5wxrFpCQY?si=PYZoWKf-45goQYDt). And so much more. We encourage you to watch [all 43 talks](https://www.youtube.com/playlist?list=PLqGQbXn_GDmnObDzgjUF4Krsfl6OUKxtp). The speakers made a significant effort to share with us what each project has been up to. | ||
|
||
Vite also got a refreshed landing page and a clean domain. You should update your URLs to point to the new [vite.dev](https://vite.dev) domain moving forward. The new design and implementation was done by VoidZero, with by the same folks that made their website. Shoutout to [Vicente Rodriguez](https://bento.me/rmoon) and [Simon Le Marchant](https://marchantweb.com/). | ||
|
||
## The next Vite major is here | ||
|
||
Today, we're taking another big step in Vite's story. The Vite [team](/team), [contributors](https://github.com/vitejs/vite/graphs/contributors), and ecosystem partners are excited to announce the release of Vite 6. | ||
|
||
Quick links: | ||
|
||
- [Docs](/) | ||
- Translations: [简体中文](https://cn.vite.dev/), [日本語](https://ja.vite.dev/), [Español](https://es.vite.dev/), [Português](https://pt.vite.dev/), [한국어](https://ko.vite.dev/), [Deutsch](https://de.vite.dev/)) | ||
- [Migration Guide](/guide/migration) | ||
- [GitHub Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#500-2024-11-26) | ||
|
||
If you're new to Vite, we suggest reading the [Getting Started](/guide/) and [Features](/guide/features) guides first. | ||
|
||
We want to thank the more than [1K contributors to Vite Core](https://github.com/vitejs/vite/graphs/contributors) and the maintainers and contributors of Vite plugins, integrations, tools, and translations that have helped us craft this new major. We invite you to get involved and help us improve Vite for the whole Ecosystem. Learn more at our [Contributing Guide](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md). To get started, we suggest helping [triage issues](https://github.com/vitejs/vite/issues), [review PRs](https://github.com/vitejs/vite/pulls), send failing tests PRs based on open issues, and support others in [Discussions](https://github.com/vitejs/vite/discussions) and Vite Land's [help forum](https://discord.com/channels/804011606160703521/1019670660856942652). If you'd like to talk to us, join our [Discord community](http://chat.vite.dev/) and say hi on the [#contributing channel](https://discord.com/channels/804011606160703521/804439875226173480). | ||
|
||
For the latest about the Vite Ecosystem and Vite core, follow us on [X](https://twitter.com/vite_js), [Bluesky](https://bsky.app/profile/vite.dev), or [Mastodon](https://webtoo.ls/@vite). | ||
|
||
## Getting started with Vite 6 | ||
|
||
You can use `pnpm create vite` to quickly scaffold a Vite app with your preferred framework or play online with Vite 6 using [vite.new](https://vite.new). You can also run `pnpm create vite-extra` to get access to templates from other frameworks and runtimes (Solid, Deno, SSR, and library starters). `create vite-extra` templates are also available when you run `create vite` under the `Others` option. | ||
|
||
The Vite starter templates are intended to be used as a playground to test Vite with different frameworks. When building your next project, you should reach out to the starter recommended by each framework. We already provide an easy way to jump to the proper starter for some frameworks when using `create vite` (like `create-vue`, `Nuxt 3`, `SvelteKit`, `Remix`, `Analog`, and `Angular`). | ||
|
||
## Node.js Support | ||
|
||
Vite 6 supports Node.js 18, 20, and 22+. Vite drops Node.js support for older versions after their [EOL](https://endoflife.date/nodejs). The Node.js 18 EOL is at the end of April 2025. We will release a new major in May to bump the required node version. | ||
|
||
## Experimental Environment API | ||
|
||
Vite 5 had two implicit Environments, `client` and `ssr`. In Vite 6, frameworks and users can configure as many as needed to model better all the runtimes the app will run on. Extensive internal refactoring was required to support custom environments and separate the module graphs per environment. Upgrading to Vite 6 should be fine without compatibility issues though. The new APIs are experimental. We will work with the ecosystem to review how they use and stabilize them for the next major. You can learn more at the [Environment API Guides](https://main.vite.dev/guide/api-environment). | ||
|
||
Apart from the docs, Sapphi wrote a great [Introduction to Environment API](https://green.sapphi.red/blog/increasing-vites-potential-with-the-environment-api). It is a great place to start and understand why we're trying to make Vite even more flexible. | ||
|
||
We'd like to thank everyone involved in defining and implementing the new APIs. Anthony Fu and Pooya Parsa made vite-node to improve [Nuxt's Dev SSR story](https://antfu.me/posts/dev-ssr-on-nuxt) with Vite. Then Anthony used vite-node to power Vitest, and Vladimir Sheremet kept improving it. At the beginning of 2023, Vladimir started working to upstream vite-node to Vite Core, and it was released as Runtime API in Vite 5.1 a year later. Feedback from ecosystem partners (special shout-out to the Cloudflare team) pushed us to do a more ambitious rework of Vite's environments. You can learn more about the story at [Patak's ViteConf 24 talk](https://www.youtube.com/watch?v=WImor3HDyqU?si=EZ-rFJn4pDW3tUvp). | ||
|
||
Everyone on the Vite team participated in defining the new API, which was co-designed with feedback from many projects in the Ecosystem. Thanks to everyone involved! We encourage you to get involved if you're building a framework, plugin, or tool on top of Vite. If you'd like to ask questions or give feedback, there is an [open GitHub discussion here](https://github.com/vitejs/vite/discussions/16358). | ||
|
||
## Main Changes | ||
|
||
- [Default value for `resolve.conditions`](/guide/migration#default-value-for-resolve-conditions) | ||
- [JSON stringify](/guide/migration#json-stringify) | ||
- [Extended support of asset references in HTML elements](/guide/migration#extended-support-of-asset-references-in-html-elements) | ||
- [postcss-load-config](/guide/migration#postcss-load-config) | ||
- [Sass now uses modern API by default](/guide/migration#sass-now-uses-modern-api-by-default) | ||
- [Customize CSS output file name in library mode](/guide/migration#customize-css-output-file-name-in-library-mode) | ||
- [And more changes that should only affect a few users](/guide/migration#advanced) | ||
|
||
## Migrating to Vite 6 | ||
|
||
For most projects, the update to Vite 6 should be straightforward. But we advise reviewing the [detailed Migration Guide](/guide/migration) before upgrading. | ||
|
||
The complete list of changes is at the [Vite 6 Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#500-2024-11-26). | ||
|
||
## Acknowledgments | ||
|
||
Vite 6 results from long work hours by our community of contributors, downstream maintainers, plugin authors, and the [Vite Team](/team). We appreciate the individuals and companies sponsoring Vite development. Vite is brought to you by [VoidZero](https://voidzero.dev), in partnership with [StackBlitz](https://stackblitz.com/), [Nuxt Labs](https://nuxtlabs.com/), and [Astro](https://astro.build). A shout-out to sponsors on [Vite's GitHub Sponsors](https://github.com/sponsors/vitejs) and [Vite's Open Collective](https://opencollective.com/vite). |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
With the big React Router v7 release yesterday, I imagine it's helpful to the remix team if it's React Router that's listed here rather than Remix. It would align with the other entries naming the server stack rather than the teams behind. Remix is still mentioned below in the Bolt section too.