# VueJS

{% hint style="danger" %}
Attention: "Please make sure in a production environments to never pull with latest tag but to pin the exact version"
{% endhint %}

The example below demonstrates how to integrate the **Arcware Pixel Streaming WebSDK** into a **Vue.js application (Vue 3)**.

This example shows how to:

* initialize the WebSDK inside a Vue component
* attach the stream to a DOM container using Vue refs
* send commands from the web interface to Unreal Engine

You can also experiment with this example using CodePen:

[Open the Vue example on CodePen](https://codepen.io/Arcware/pen/WNPXZJO)

Replace the example <mark style="color:orange;">`shareId`</mark> with your own project Share ID to connect to your application.

***

## Code Template

For a quick start, you can use the following implementation.

***

## Step 1 — Create the PixelStreaming Component

Create a new file called:

```
PixelStreaming.vue
```

```vue
<template>
  <div
    id="video-container"
    ref="videoContainerRef"
    style="width: 100vw; height: 100vh"
  ></div>

  <button
    @click="handleSendCommand({ test: 'Send command' })"
    class="button-interaction"
  >
    Emit command to Unreal
  </button>
</template>

<script lang="ts">
import { ref, onMounted } from "vue";
import * as PixelStreamingWebSdk from "@arcware-cloud/pixelstreaming-websdk";

export default {
  setup() {
    const videoContainerRef = ref(null);
    const arcwareApplication = ref(null);

    const handleSendCommand = (descriptor) => {
      if (arcwareApplication.value) {
        arcwareApplication.value.emitUIInteraction(descriptor);
      }
    };

    const initPixelStreaming = () => {
      const { Application } = PixelStreamingWebSdk.ArcwareInit(
        {
          shareId: "<your-shareId-goes-here>"
        },
        {
          initialSettings: {
            StartVideoMuted: true,
            AutoConnect: true,
            AutoPlayVideo: true
          },
          settings: {
            infoButton: true,
            micButton: true,
            audioButton: true,
            fullscreenButton: true,
            settingsButton: true,
            connectionStrengthIcon: true
          }
        }
      );

      arcwareApplication.value = Application;

      if (videoContainerRef.value) {
        videoContainerRef.value.appendChild(Application.rootElement);
      }
    };

    onMounted(initPixelStreaming);

    return {
      videoContainerRef,
      handleSendCommand
    };
  }
};
</script>

<style scoped>
body {
  font-family: system-ui;
  background: #000;
  text-align: center;
  margin: 0;
  padding: 0;
}

#app,
#video-container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  position: relative;
}

#video-container video {
  left: 0;
  top: 0;
}

.button-interaction {
  position: absolute;
  width: 200px;
  right: 100px;
  bottom: 20px;
  margin: auto;
  z-index: 9;
}
</style>
```

***

## Step 2 — Import the Component

Now import the component into your main application file.

Example **`App.vue`**:

```vue
<script setup lang="ts">
import PixelStreaming from "./components/PixelStreaming.vue";
</script>

<template>
  <main>
    <PixelStreaming />
  </main>
</template>
```

***

## How This Example Works

#### 1. Initialize the SDK

The `ArcwareInit` function creates the WebSDK components and prepares the streaming connection.

***

#### 2. Mount the Stream

A Vue `ref` (`videoContainerRef`) is used to access the container element.

The SDK provides the streaming container via:

```
Application.rootElement
```

This element contains the video player and input handling logic.

***

#### 3. Send Messages to Unreal Engine

The function

```
emitUIInteraction()
```

allows the web UI to send commands to the Unreal application.

In this example, clicking the button sends a simple test message.

***

## Notes

* Replace `<your-shareId-goes-here>` with your project’s Share ID.
* The stream should always be mounted **inside `onMounted()`** to ensure the DOM container exists.
* Vue `ref`s are used to safely access DOM elements inside the component lifecycle.