Directives
Overview
Directives help you inject tags in your Blade file. Typically, you will only need to use @vite, which is smart enough to include the development server script and your entrypoints. However, @tag and @client are also available if you need more control.
@vite
This directive prints the tag that includes the development server's script (when necessary) and all of the registered entrypoints, script and CSS.
If you need to specify a configuration, you can pass its name as the first parameter. The corresponding development server URL will be used.
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@vite
<!-- Or: @vite('my-config-name') -->
</head>
<body>
<!-- -->
</body>
</html>
@tag
This directive includes the tag for the entrypoint given as the first parameter. The included entrypoint will be the first of the configured ones that contain the given name.
If you need to specify a configuration, you can pass its name as the second parameter.
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@client <!-- don't forget to include the Vite client script -->
@tag('main')
</head>
<body>
<!-- -->
</body>
</html>
@client
This directive includes the tag for the Vite client script, which is required to provide features such as HMR. It should be included before any other directive.
When in manifest mode, even if this directive is called, the client script will not be included.
Render once
You can use the built-in @once directive to render the client script only once if required. If you forget to do that, no worries, the Vite client is smart enough to not initialize twice.
@react
This directive includes the script necessary for providing the hot module replacement feature when using React. It should be included manually when using React, whether @vite is used or not.