1. Using the quarkus-web-dependency-locator extension
<dependency>
    <groupId>io.quarkus</groupId>
    <artifactId>quarkus-web-dependency-locator</artifactId>
</dependency>implementation("io.quarkus:quarkus-web-dependency-locator")1.1. WebJars
If you are using WebJars, like the following JQuery one:
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.1.1</version>
</dependency>implementation("org.webjars:jquery:3.1.1")you can reference the files in the jar from your HTML, example /webjars/jquery/3.1.1/jquery.min.js.
The above is available by default, however, adding the quarkus-web-dependency-locator extension allows you to reference the files without having to include the version in the path, example /webjars/jquery/jquery.min.js.
1.2. Mvnpm
If you are using mvnpm, like the following Lit one:
<dependency>
    <groupId>org.mvnpm</groupId>
    <artifactId>lit</artifactId>
    <version>3.1.2</version>
</dependency>implementation("org.mvnpm:lit:3.1.2")you can reference the files in the jar from your HTML, example /_static/lit/3.1.2/index.js.
The above is available by default, however, adding the quarkus-web-dependency-locator extension allows you to reference the files without having to include the version in the path, example /_static/lit/index.js.
1.2.1. ImportMaps
Mvnpm jars also allows you to use an importmap, that will
allow you to just use module imports, example import { LitElement, html, css} from 'lit';.
The importmap is generated by the quarkus-web-dependency-locator extension, and available at /_importmap/generated_importmap.js.
This means adding the following to your index.html will allow you to import web libraries by name:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My app</title>
    <script src="/_importmap/generated_importmap.js"></script> (1)
    <script type="module">
        import '@lit'; (2)
        import 'app/demo-app.js'; (3)
    </script>
  </head>
</html>| 1 | Use the generated importmap | 
| 2 | Import web libraries | 
| 3 | Import your own files, this can be done by adding quarkus.web-dependency-locator.import-mappings.app/ = /app/to the config. Any key-value pair can be added. | 
1.2.1.1. Automatic imports
You can also automate the imports above. To do this, move your web assets from src/main/resources/META-INF/resources to src/main/resources/web
and now replace the above scripts and imports with {#bundle /}:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My app</title>
    {#bundle /} (1)
  </head>
</html>| 1 | This will be replaced at build time with the importmap script, and also include any CSS and JavaScript discovered in the /appdirectory. | 
This allows you to add libraries, js and css without having to change your HTML. Hot-reload is also supported.


