Assets

Preloads the assets (textures, audio, etc.) used by your components using the PixiJS Assets API. It contains three slots: default, fallback, and error. The default slot will not render until the assets have finished loading.

You can show progress by using the progress prop from the fallback slot.

Default Slot

You can also access the loaded entry through the default slot, which is an object that you can iterate over.

Alias

You can specify aliases for resources using the alias and entry props, or by passing an array of UnresolvedAsset objects:

<template>
  <assets
    :entry="[
      { alias: 'flowerTop', src: '/assets/flowerTop.png' },
      { alias: 'eggHead', src: '/assets/eggHead.png' },
    ]"
  >
    <sprite texture="flowerTop" />
    <sprite texture="eggHead" />
  </assets>
</template>

You can also use the alias and entry props together for a single asset:

<template>
  <assets alias="mySprite" entry="/assets/mySprite.png" @loaded="onLoaded">
    <sprite texture="mySprite" />
  </assets>
</template>

Bundles

Use <assets-bundle> to load asset bundles, either from a manifest or by defining bundles inline:

<template>
  <!-- Load from manifest -->
  <assets-bundle manifest="/assets/manifest.json" entry="game-screen">
    <template #fallback="{ progress }">
      <text :anchor="0.5" :x="120" :y="120">
        {{ `Loading ${progress}%` }}
      </text>
    </template>
    <template #default="{ data }">
      <sprite :texture="data.background" />
    </template>
  </assets-bundle>

  <!-- Define bundle inline -->
  <assets-bundle
    id="my-bundle"
    :entry="[
      { alias: 'bg', src: '/assets/bg.png' },
      { alias: 'hero', src: '/assets/hero.png' },
    ]"
  >
    <template #default="{ data }">
      <sprite :texture="data.bg" />
    </template>
  </assets-bundle>
</template>

API

Assets Props

Name	Type	Default	Description
alias	string array	undefined	Alias name(s) for the asset being loaded.
entry	string array object	undefined	The asset entry to load. Can be a URL, array of URLs, or asset descriptor object(s).
autoload	boolean	true	Whether to automatically load assets via Assets.load.
autounload	boolean	false	Whether to unload assets when the component is unmounted.
background	boolean	false	Load assets in the background while the application is running.
basePath	string	undefined	Base path prepended to all asset URLs.

Assets Events

Name	Type	Description
loaded	function	Emitted when all assets have finished loading.
progress	function	Emitted when loading progress updates.
error	function	Emitted when asset loading fails.

Assets Slots

Name	Type	Description
default	({ data }): void	Rendered after loading completes. data contains the loaded assets.
fallback	({ progress }): void	Rendered while assets are loading. progress is a number from 0 to 1.
error	({ error }): void	Rendered when asset loading fails.

AssetsBundle Props

Name	Type	Default	Description
manifest	object string	undefined	Assets manifest containing bundle definitions.
entry	string array object	undefined	Bundle name(s) to load, or inline bundle assets when used with id.
id	string	undefined	Bundle ID for inline bundle definitions.
autoload	boolean	true	Whether to automatically load the bundle.
autounload	boolean	false	Whether to unload the bundle when the component is unmounted.
background	boolean	false	Load the bundle in the background.

AssetsBundle Events

Name	Type	Description
loaded	function	Emitted when the bundle has finished loading.
progress	function	Emitted when loading progress updates.