Using the 'Custom Code' Block

The Custom Code block is a fully customiseable blockthat can be added to your interface, it has 3 inputs

• HTML

• CSS/SCSS

• Javascript

It compiles to a Vue 3 Single File component and allows for all of the rich functionality that Vue 3 provides including

• Data Object

• Methods

• Computed Properties

• Watchers

• Lifecycle Hooks

Reading up on Vue Component Basics documentation is strongly encouraged so that you can learn what's possible.

Using the Javascript SDK

The Qik Javascript SDK is included in every custom component and can be accessed in both the HTML template and the Javascript Code. It is included as a global property on all Vue components at this.$sdk in addition, an 'app' service is augmented onto the sdk and available at this.$sdk.app This service has specific functionality for interacting within your app.

Using Services

If you have created services in your interface, these can be accessed via the SDK like so

{
  computed:{
   myService() {
      return this.$sdk.app.services['yourServiceName']
   }
  },
}

Using Components

If you have created components in your interface, you can instantiate them like any other html element by adding their element tag into your html template. eg. <my-custom-component hello="world"/>