# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.arcware.cloud/web-integration/new-websdk/code-examples/vuejs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.