Skip to content
On this page

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:

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:

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"/>
Padrino Integration has loaded