• Introduction
    • Why Liquid
    • Getting started
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Framework integrations
      • React bindings
      • Vue bindings
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outsid
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Tweaking the bundler and adjusting the assets path
Guides Component assets

Component assets #

Some Liquid Web Components include assets which need to be loaded during runtime. Depending on how you bundle your client side resources, you may need to tweak your bundler so that it puts Liquid's assets into the right place and "tell" Liquid where to look for the assets.

Tweaking the bundler and adjusting the assets path #

Suppose you are using Vite which by default requires you to put statically served assets into a folder called public in the root directory of your project. You can copy over all Liquid assets into that folder by tweeking the Vite config as follows:

// vite.config.js
import { defineConfig } from 'vite'
import copy from 'rollup-plugin-copy'

export default defineConfig({
plugins: [
copy({
targets: [
{
src: 'node_modules/@emdgroup-liquid/liquid/dist/liquid/assets/*',
dest: 'public/assets',
},
],
hook: 'buildStart',
}),
// ...
],
// ...
})

Now all you need to do is "tell" the Liquid components where they have to load their assets from. You have two options here.

  1. Specify the asset path using a metadata element in the document head section:
<meta data-ld-asset-path="/">
  1. Specify the asset path by setting the __LD_ASSET_PATH__ variable on the window object:
// if-clause only required in server-side rendering context
if (typeof window !== "undefined") {
window.__LD_ASSET_PATH__ = window.location.origin
}

For more examples check out our sandbox apps.