Skip to content

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.

<script lang="ts" setup>
import { Loader, useScreen } from 'vue3-pixi'
const screen = useScreen()
</script>

<template>
  <Loader :resources="['/assets/metal_slug.png']">
    <template #fallback="{ progress }">
      <text :x="120" :y="120" :anchor="0.5">
        {{ `Loading... ${progress}` }}
      </text>
    </template>
    <sprite
      texture="/assets/metal_slug.png"
      :x="screen.width / 2"
      :y="screen.height / 2"
      :anchor="0.5"
      :scale="0.8"
    />
  </Loader>
</template>

Default Slot

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

<script setup>
import { Loader } from 'vue3-pixi'

const images = [
  '/assets/food/lemonpie.png',
  '/assets/food/strawberrycake.png',
  '/assets/food/cheesecake.png',
]
</script>

<template>
  <Loader :resources="images">
    <!-- loading state via #fallback slot -->
    <template #fallback>
      <text :anchor="0.5" :x="120" :y="120" :style="{ fill: 'white' }">
        Loading...
      </text>
    </template>
    <!-- component with nested async dependencies -->
    <template #default="{ textures }">
      <sprite
        v-for="(image, key, index) in textures" :key="key"
        :texture="image"
        :anchor="0.5"
        :x="68 + index * 50"
        :y="120"
        :scale="1.4"
      />
    </template>
  </Loader>
</template>

Alias

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

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

or use array

vue
<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 😉.

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

API

Loader Props

NameTypeDefaultDescription
resourcesarray objectundefinedThe resources to load.
optionsobjectundefinedThe options to pass to the all resources.
bundleIdsstringnanoid(5)The bundle ids to load.

Loader Events

NameTypeDescription
resolvedfunctionThe resolved event is emitted when the loader has finished loading all resources.
progressfunctionThe progress event is emitted when the loader has loaded a resource.

Loader Slots

NameTypeDescription
default({ textures }): voidThe default slot is where you put all your Pixi elements.
fallback({ progress }): voidThe default slot is where you put all your Pixi elements.