Plugin Legacy
When using @vitejs/plugin-legacy, it's necessary to use additional tag helpers to output nomodule script tags and polyfills.
Installation 💿
Add this line to your application's Gemfile:
gem 'vite_plugin_legacy'
And then run:
bundle install
Tag Helpers 🏷
In order to include the polyfills and script tags you can using the following helpers:
- vite_legacy_javascript_tag: Render a
<script>tag referencing a JavaScript file. - vite_legacy_typescript_tag: Render a
<script>tag referencing a TypeScript file. - vite_legacy_polyfill_tag: Renders the polyfills necessary to enable code-splitting in legacy browsers.
The polyfill is included by default when using vite_legacy_javascript_tag
<head>
<title>Example</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= vite_client_tag %>
<%= vite_javascript_tag 'application' %>
</head>
<body>
<%= yield %>
<%= vite_legacy_javascript_tag 'application' %>
</body>
Notice that it's necessary to still use vite_javascript_tag in order to render module tags for modern browsers.