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 ​

Loader Events ​

Loader Slots ​