Combo.Vite.HTML (combo_vite v0.10.0)

Provides Vite related components and helpers for rendering HTML.

Usage

Add following code into the html_helpers/0 function:

defmodule MyApp.Web do
  # ...

  defp html_helpers do
    quote do
      # ...

      import Combo.Vite.HTML

      # ...
    end
  end

  # ...
end

Renders an element for a given asset.

Renders elements for given assets.

Gets the content of a given asset.

vite_mode()

Gets the running mode of Vite.

Renders script element for React refresh runtime, only when the Vite dev server is running.

vite_url(name)

Gets the URL of a given asset.

Renders an element for a given asset.

Different from vite_assets/1, it doesn't loads the @vite/client. All other behaviors are the same.

<.vite_asset name="src/css/app.css" />

Renders elements for given assets.

This component auto-detects the mode of Vite and behaves accordingly:

In dev mode, it loads the @vite/client (for Hot Module Replacement) and the given assets.
In build mode, it loads the compiled and versioned assets, including any imported CSS.

<.vite_assets names={["src/css/app.css", "src/js/app.js"]} />

Gets the content of a given asset.

Put content into normal tags:

<div>
  {raw vite_content("src/images/logo.svg")}
</div>

Put content into style and script tags:

<style>
  <%= raw vite_content("src/css/app.css")} %>
</style>
<script>
  <%= raw vite_content("src/js/app.js")} %>
</script>

Gets the running mode of Vite.

Possible values are :dev and :prod.

vite_mode() == :dev
vite_mode() == :prod

Renders script element for React refresh runtime, only when the Vite dev server is running.

<.vite_react_refresh />

Gets the URL of a given asset.

<img src={vite_url("src/images/logo.png")} />