{vite}
Links the scripts and stylesheets of a Vite build by the name of their source - or the dev server while it runs.
Syntax
{vite 'src/main.js'}
{vite 'src/main.jsx', 'src/admin.js', react}Parameters
-
entry -
An entry of the build, as
build.rollupOptions.inputnames it. Several entries may follow each other.
Options
-
react - Bare option: with the dev server, write the preamble the React plugin needs for fast refresh first.
Description
{vite 'src/main.js'} writes the tags that load an entry of a Vite build. In production it reads the manifest Vite writes - www/<app>/build/.vite/manifest.json (build.manifest: true, build.outDir that directory) - and gives per entry a <link rel="stylesheet"> for its CSS and the CSS of every chunk it imports, a <link rel="modulepreload"> for every such chunk, and its <script type="module">. A dynamic import is left to load when asked for. The addresses are made of $padRoot, the application and $padViteBuild (default build), which is the build's base.
While the dev server runs - $padViteDev names it, or the file hot in the build directory holds its address - the tags point at the dev server instead: @vite/client first, then the sources as they are, for hot module replacement. The react option adds the fast-refresh preamble the React plugin needs in that mode.
A file goes out once a page, however many {vite} tags name it, and a script carries the request's nonce when $padCsp asks for one. A {vite} without an entry, an entry the manifest does not have, and a build without a manifest while no dev server runs are errors. The output depends on a build, so the examples are shown rather than run; the islands application uses it for real. For a plain file of www/, use {asset}.
Examples
One entry in the head
The entry's CSS, its chunks preloaded and its module script, from the build's manifest.
<head>
<title>{$title}</title>
{vite 'src/main.js'}
</head>Several entries with React
Two entries in one tag; with the dev server running, react writes the fast-refresh preamble first.
{vite 'src/main.jsx', 'src/admin.js', react}
<div data-island="Counter" data-props="{^counter}"></div>See also
- {asset} The address of a file of www/<app>/ with a version of its contents, safe behind a far-future cache header.
- {reactData} Writes the mount point of a React component, its data from a provider in _providers/ as JSON in an attribute.
- {nonce} This request's Content-Security-Policy nonce, for a script or style the policy lets run.