# Application

The `<p-application>` component is the based component which contains your PIXI application. All contents of your PIXI app must be defined inside this component

## Usage

{% embed url="https://codesandbox.io/s/vue-pixi-wrapperapplication-3d832" %}

## Props

See [https://pixijs.download/dev/docs/PIXI.Application.html](https://pixijs.download/dev/docs/PIXI.Application.html)

#### PIXI native props <a href="#additional-props" id="additional-props"></a>

Description of PIXI native props can be found here: [https://pixijs.download/dev/docs/PIXI.Application.html](https://pixijs.download/dev/docs/PIXI.Application.html#destroy)



| Name                      | Type                  | Default               |
| ------------------------- | --------------------- | --------------------- |
| **autoStart**             | `boolean`             | `canvas`              |
| **width**                 | `number`              | `800`                 |
| **height**                | `number`              | `600`                 |
| **useContextAlpha**       | `boolean`             | `true`                |
| **autoDensity**           | `boolean`             | `false`               |
| **antialias**             | `boolean`             | `false`               |
| **preserveDrawingBuffer** | `boolean`             | `false`               |
| **resolution**            | `number`              | `settings.RESOLUTION` |
| **forceCanvas**           | `boolean`             | `false`               |
| **backgroundColor**       | `number`              | `0x000000`            |
| **backgroundAlpha**       | `number`              | `1`                   |
| **clearBeforeRender**     | `boolean`             | `true`                |
| **powerPreference**       | `string`              |                       |
| **sharedLoader**          | `boolean`             | `false`               |
| **sharedTicker**          | `boolean`             | `false`               |
| **resizeTo**              | Window \| HTMLElement |                       |

#### Additional Props <a href="#additional-props" id="additional-props"></a>

| Name             | Type      | Default  | Description                                                 |
| ---------------- | --------- | -------- | ----------------------------------------------------------- |
| **canvasId**     | `string`  | `canvas` | The id of the canvas element where renders your application |
| **skipHello**    | `boolean` | `false`  | Whether to skip hello message from PIXI in console window   |
| **enableTicker** | `boolean` | `false`  | Whether to enable ticker event                              |
| **interactive**  | `boolean` | `false`  | If the application interactive                              |
| **events**       | `Array`   | `[]`     | List of events to listen to if interactive is `true`        |

## Events

| Name                                                                 | Payload              |
| -------------------------------------------------------------------- | -------------------- |
| **ready**                                                            | Application instance |
| **ticker**                                                           | Ticker delta         |
| Any other interactive events prefix by `on` . For example: `onclick` |                      |
