Skip to main content

Vue

Openexus JavaScript/TypeScript support provides the ability to use the Vue framework within a node. This provides the node with all the power of Vue, JSX/TSX, and Reactive programming.

In Openexus this may be achieved in one of two ways:

Openexus Helper SDK​

The Vue Helper SDK provides a means to tell Openexus that you are using Vue, and a way to interact with Openexus items such as nodes and properties.

To use Vue and the Openexus Javascript/TypeScript Vue Helper SDK...

  1. Import Framework and the SDK;
  2. Setup the Helper SDK;
  3. Setup a Renderer.

Once the above steps are satisfied the node is ready to use Vue and Openexus together. There may be additional things to do to work with Openexus items within Vue, so make sure to read the Framework Specific Documentation below.

Import Framework and the Helper SDK​

src/main.jsx
import * as vue from 'vue';
import { setup } from 'openexus/vue';

Setup the Helper SDK​

src/main.jsx
context = setup(context, vue);

Setup a Renderer​

A renderer tells a node what base Vue component to display for the node. Some nodes may not require a renderer, but most do. If you have a View property, or a property that has a datatype of html you will need to setup a renderer for it as shown here.

src/SomeComponent.vue
<template>
  <p>
    Hello world!
  </p>
</template>
src/main.jsx
// Set the View property to the Component.
import SomeComponent from './SomeComponent.vue';
context.set('view', context.render(SomeComponent));`,

Example​

Framework Specifics​

Using the Vue framework with Openexus has some small differences over regular Vue, especially where one needs to interact with Openexus. These differences are outlined below.

Property References​

In order to use a reference to a Openexus node property, the property reference must be obtained from Openexus. The SDK provides an easy to use way to do this with context.use(). context.use() takes the name of a specific node property (as defined in your properties.yaml file) and creates an reference to that object which can be interacted with to get and set the value.

Definition:

context.use(<property-name>) => vueReference

Usage:

const countRef = context.use('count'); 
const foo = countRef.value; // getter
countRef.value = 123; // setter

Manual Setup​

For more specific control, one may choose to interface with the Vue library without using the Openexus React Helper SDK.

Render View​

Without using the Openexus Vue helper SDK, one must manually createApp and mount on the element when setting up the ((view)) property.

src/main.ts
import { createApp } from 'vue';
import VueComponent from './VueComponent.vue';

context.set('view', (el) => createApp(VueComponent).mount(el));

Property References​

Without using the Openexus Vue helper SDK, one must manually create ref and setup subscription. This is an example helper function.

src/helper.ts
import { ref, watch, onUnmounted } from 'vue';

function usePropertyRef(propertyName) {
  const propertyRef = ref(context.get(propertyName));
  let isInternalUpdate = false;

  // Watch for local changes and update the context
  const stopWatch = watch(propertyRef, (newValue) => {
    if (!isInternalUpdate) {
      isInternalUpdate = true;
      context.set(propertyName, newValue);
      isInternalUpdate = false;
    }
  });

  // Subscribe to external changes
  const unsubscribe = context.subscribe(propertyName, (newValue) => {
    if (!isInternalUpdate) {
      isInternalUpdate = true;
      propertyRef.value = newValue;
      isInternalUpdate = false;
    }
  });

  // Cleanup
  onUnmounted(() => {
    stopWatch();
    unsubscribe();
  });

  return propertyRef;
}
src/VueComponent.vue
<script setup>
  import { usePropertyRef } from './helper.ts';
  const count = usePropertyRef('count'); // returns a ref
  function onClick() {
    count.value = Math.random();
  }
</script>

<template>
  <button @click="onClick">Count: {{ count }}</button>
</template>