Padrino Integration #

Once you have installed the vite_padrino gem, and have run bundle exec vite install, you should have an installed example.

Tag Helpers 🏷 #

As we saw in the development section, entrypoints will be automatically detected.

In order to link these JavaScript and CSS entrypoints managed by Vite in your Padrino views or templates, you can use the following helpers:

• 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

You can pass any options supported by javascript_include_tag and stylesheet_link_tag.

%head
  %title Example
  = vite_client_tag

  = vite_stylesheet_tag 'styles'
  = vite_typescript_tag 'application'

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') }
%link{ rel: 'prefetch', href: vite_asset_path('typography.css') }

All helpers resolve names to the [entrypointsDir] unless the path includes a directory:

vite_asset_path 'logo.svg'        # app/frontend/entrypoints/logo.svg
vite_asset_path 'images/logo.svg' # app/frontend/images/logo.svg

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

They will only render if the dev server is running.

Smart Output ✨ #

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

= vite_javascript_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, these tags are omitted, as Vite will load the dependencies.

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