Published on

Tag Helpers 🏷


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

  {% vite_client_tag %}
  {% vite_typescript_tag application %}
  {% vite_stylesheet_tag typography.scss %}

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:

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"/>