<script> tag a clear execution context via attributes. You always know what runs where: build time or browser, bundled or inline, deferred or blocking.
Script types at a glance
| Type | Bundled | Hoisted | When it runs |
|---|---|---|---|
<script is:build> | No | — | Build time only; stripped from output |
<script> (plain) | Yes | End of <body> | Browser; bundled by Vite |
<script is:inline> | No | No | Browser; runs in place immediately |
<script is:blocking> | No | <head> | Browser; blocks page render |
<script is:build>
The build script runs in Node.js at build time and is never sent to the browser. Use it to import components, fetch data, and prepare variables for { } expressions:
import type without any extra configuration. The VS Code extension provides full IntelliSense and diagnostics.
To opt out of TypeScript for a specific build script, add type="js":
Only one
<script is:build> per template file. Build-time code is completely stripped from
the HTML output.Plain <script> (client)
A <script> with no attribute is a client-side module script. Vite bundles, minifies, and optimizes it. It runs in the browser with HMR in dev:
props attribute to inject build-scope values into a client script:
<script is:inline>
Left in the HTML exactly as-is. Vite does not process it. Use it for theme detection, third-party snippets, or any script that must run synchronously:
<script is:blocking>
Moved into <head> and runs before the body renders. Use for critical initialization: