UI Kit

<optix-app>

This element adds the proper padding and context to other components of the page. It also provides a contextual class on the tag, related to the platform type:

<optix-container>

<optix-sheet>

this.$optix.init(options)

You may notice the “init” method in the HTML boilerplate. This method is important to activate the Optix component. It will read the context variables and also show the page only when the canvas is fully loaded (make sure to use the class “optix-show-on-load” at the main object)

mounted(){
   this.$optix.init().then(()=>{
     this.message =
       ’Hello World! Loaded at ’+new Date()
      });
    }

The options parameter is optional and can receive an object that overrides the current environment variables:

The app client ID (useful if your app open or link other canvases of your app). Default: null.

The token argument name. Default: “token”

this.$optix.graphQL(query, variables)

this.$optix
  .graphQL(
    `query me { 
    me {
         authType 
         user {
           email
         }
       } 
    }`
  )
  .then(result => {
    console.log(result.data);
  });

this.$optix.openModal(id, context)

You can open a modal canvas using this method. Use the identifier parameter to define the canvas target. The context variables will be concatenated as URL parameters.

Make sure to provide a client ID at the init phase before using modals.

mounted(){
   this.$optix.init({
   	       client_id:"your_app_client_id"
   	    }).then(()=>{
   	    // …
    });
}