Advanced Usage

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

Additional Entrypoints

The additionalEntrypoints setting added in 3.0.0 allows you to configure additional entries that are located outside the entrypointsDir.

By default, it's configured to: ["~/{assets,fonts,icons,images}/**/*"], which enables bundling and referencing these files with 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.

Required

Make sure to add app/components/**/* to watchAdditionalPaths, to ensure the build is triggered when any of the component files changes.

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' %>