Tag Helpers 🏷

Use the following Liquid tags to link JavaScript and CSS entrypoints managed by Vite in your Jekyll pages or partials:

vite_javascript_tag: Renders a <script> tag referencing a JavaScript file
vite_typescript_tag: Renders a <script> tag referencing a TypeScript file
vite_stylesheet_tag: Renders a <link> tag referencing a CSS file

<head>
  <title>Example</title>
  {% vite_client_tag %}
  {% vite_typescript_tag application %}
  {% vite_stylesheet_tag typography.scss %}
</head>

For other types of assets, you can use vite_asset_path and pass the resulting URI to the appropriate tag helper.

<img src="{% vite_asset_path images/logo.svg %}" alt="Logo"/>

Enabling Hot Module Reload 🔥

Use the following helpers to enable HMR in development:

vite_client_tag: Renders the Vite client to enable Hot Module Reload
vite_react_refresh_tag: Only when using @vitejs/plugin-react-refresh

They will only render if the dev server is running.

Smart Output ✨

For convenience, vite_javascript_tag and vite_typescript_tag will automatically inject tags for styles or entries imported within a script.

{% vite_typescript_tag application %}

Example output:

<script src="/vite/assets/application.a0ba047e.js" type="module" crossorigin="anonymous"/>
<link rel="modulepreload" href="/vite/assets/example_import.8e1fddc0.js" as="script" type="text/javascript" crossorigin="anonymous">
<link rel="stylesheet" media="screen" href="/vite/assets/application.cccfef34.css">

When running the development server, Vite will inject imports and styles dynamically to enable HMR.

<script src="/vite/assets/application.ts" type="module" crossorigin="anonymous"/>

Suggest changes to this page