Advanced Usage #

This section discusses settings that most projects don't need to configure explicitly.

Additional Entrypoints #

By default, any files inside the entrypointsDir will be considered entries to be bundled, allowing them to be referenced in tag helpers.

If you need to reference files outside entrypointsDir, you can use additionalEntrypoints to configure additional entries to be bundled by Vite.

By default, it's configured to: ["~/{assets,fonts,icons,images}/**/*"], since it's common to reference these files in tag helpers:

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

If you would like to opt out from bundling these files, configure it as:

    "additionalEntrypoints": []

Bundling files outside sourceCodeDir #

When using a library such as ViewComponent, it can be convenient to group JS and CSS files within each component folder, which is called sidecar assets.

There are a few options to achieve this, each with their pros and cons.

Import every component #

The simplest option is to leverage glob imports to import all components in a single entrypoint, which is suitable for cases where there are few components, or when all components should be registered in all pages.

// app/frontend/entrypoints/application.js
import.meta.globEager('../../components/**/*_component.js')

Any files imported from each .js file will be bundled as well.

One entrypoint per component #

To bundle each component independently, configure additionalEntrypoints:

    "additionalEntrypoints": [
      "app/components/**/*_component.{js,ts}",
      "~/{assets,fonts,icons,images}/**/*"
    ]

and then reference them as needed in views or partials:

<%= vite_javascript_tag '/app/components/comment_component' %>