Loader

Preloads the assets (textures, audio, etc.) used by your components. It contains two slots, fallback and the default. The default slot will not render until the Loader has finished.

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

Default Slot

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

Alias

You can specify aliases for resources using { [key]: Asset } or an array [key, Asset].

<template>
  <Loader
    :resources="{
      flowerTop: '/assets/flowerTop.png',
      eggHead: '/assets/eggHead.png',
    }"
  >
    <sprite texture="flowerTop" />
    <sprite texture="eggHead" />
  </Loader>
</template>

or use array

<template>
  <Loader
    :resources="[
      ['flowerTop', '/assets/flowerTop.png'],
      ['eggHead', '/assets/eggHead.png'],
    ]"
  >
    <sprite texture="flowerTop" />
    <sprite texture="eggHead" />
  </Loader>
</template>

Import

In a Vite project, you may sometimes need to use the import function to import resources. No worries! vue3-pixi will handle the parsing for you 😉.

<Loader
  :resources="[
    import('./assets/adventurer-spritesheet.json'),
    ['flowerTop', import('./assets/flowerTop.png')],
    ['eggHead', import('./assets/eggHead.png')],
  ]"
>
  <!-- ... -->
</Loader>

API

Loader Props

Name	Type	Default	Description
resources	array object	undefined	The resources to load.
options	object	undefined	The options to pass to the all resources.
bundleIds	string	nanoid(5)	The bundle ids to load.

Loader Events

Name	Type	Description
resolved	function	The resolved event is emitted when the loader has finished loading all resources.
progress	function	The progress event is emitted when the loader has loaded a resource.

Loader Slots

Name	Type	Description
default	({ textures }): void	The default slot is where you put all your Pixi elements.
fallback	({ progress }): void	The default slot is where you put all your Pixi elements.