> For the complete documentation index, see [llms.txt](https://docs.aitheon.com/creators-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aitheon.com/creators-studio/new-component-creation-tutorial/vue.js-for-components-creation.md).

# Vue.js for UI Components Creation

Vue.js is a JavaScript framework that is very convenient for UI components creation in Aitheon Apps Editor.

The editor uses the v2 version of the framework. Discover the native [**Vue.js tutorial**](https://vuejs.org/v2/guide/) before we go through the sample component content.

## Sample Specifics

The sample UI component creates a simple button, that passes on a string type message (The standard [**button**](/creators-studio/standard-components.md#button) doesn't do this - it works differently). 

The sample project, which you can use as a template, contains two components folders: **example-button** (a UI component sample) and **example-uppercase**.

The difference in a UI component example - two files that provide the UI element appearance and visual behavior rules: the **example-button** folder contains a **ui** sub-folder with an **ExampleButton.vue** file and a **helpers.js** file.  

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MQHfJsAU37EqS-Deiw8%2F-MQHiWGfZf_OHJ61rQH9%2Ffolder.png?alt=media\&token=85fe5ecb-6653-4ba7-9acb-f353d9aa99a2)

The rest of the files - **.html** and **.js** - and **icons** subfolder are the same as in the [**example-uppercase** instance](/creators-studio/new-component-creation-tutorial/overview.md).

### **ExampleButton.vue**

The file with the Vue.js framework content. It is built in the one-file style - see [**ExampleButton.vue overview** ](/creators-studio/new-component-creation-tutorial/vue.js-for-components-creation.md#examplebutton-vue-overview)below.

This file defines the appearance behavior of the button.

### example-button.js

The file contains a specific part for the UI component. (Explore the part after a corresponding note there: '**// call this only for UI Component**').

## ExampleButton.vue overview

The Vue.js framework lets you group your **`<template>`**, corresponding **`<script>`**, and CSS **`<style>`** all together in a single file ending in **.vue**.&#x20;

In a template for a UI element component the **ExampleButton.vue** file follows the one-file style.&#x20;

You can still separate JavaScript and CSS into separate files if you want, and import them to a **.vue** like this: **`<script src="./my-component.js"></script>`** and **`<style src="./my-component.css"></style>`**.

### **\<template>**

Contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax.

{% hint style="info" %}
By setting the lang attribute on the **`<template>`** tag, you can use Pug template syntax instead of standard HTML — **`<template lang="pug">`**.&#x20;
{% endhint %}

In the instance two Vue.js directives are used: **`v-if`** - [conditional rendering](https://vuejs.org/v2/guide/conditional.html) (see the[ **v-if documentation**](https://vuejs.org/v2/api/#v-if)), and **`v-on`** - [event handling](https://vuejs.org/v2/guide/events.html) (see the [**v-on documentation**](https://vuejs.org/v2/api/#v-on)).&#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MRZL5WajnJRCt0WIcPN%2F-MRZMm5oPRIu9LtlAIhV%2Ftemplate.png?alt=media\&token=9a3c1cdb-6dc4-41d5-b527-b15a5d42cfaf)

**`v-if`** directive renders the block if **`config`** returns 'true'.&#x20;

**`v-on`** directive calls the **`widgetChangeHandler`** method when a click happens. (See the [**`<script>`**](/creators-studio/new-component-creation-tutorial/vue.js-for-components-creation.md#less-than-script-greater-than) block).

Styles for the widget are defined lower in the [**`<style>`**](/creators-studio/new-component-creation-tutorial/vue.js-for-components-creation.md#less-than-style-greater-than) block of this file.

### **\<script>**

Contains all of the non-display logic of your component. Most importantly, your **`<script>`** tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a render() function.

{% hint style="info" %}
If you want to use TypeScript syntax, you need to set the lang attribute on the **`<script>`** tag to signify to the compiler that you're using TypeScript — **`<script lang="ts">`**.
{% endhint %}

In the instance here defined data, methods, watchers, and props (inputs).  &#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MRtd12ay9KlGULQZe7_%2F-MRtdla3cPVKHoCBVKLm%2Fscript1.png?alt=media\&token=9ec23c98-9aef-43e3-baf4-89248dc9bb6c)

#### import

The first part of this block is the import of two objects from the **helpers.js** module **(1)**.&#x20;

{% hint style="info" %}
**from './helpers'** will look for a file called **helpers.js** in the same directory as the file you are requesting the import from. There is no need to add the .js extension. Moreover, when the module file is in the same directory, you can even use the form **from 'helpers'**.
{% endhint %}

#### **export default**

**`export default{}` (2)** is a component object, the **.vue** files\` syntax that makes the following object definition available for use.

#### data

The **`data()`** function **(3)** describes variables that we can use in the **`<template>`**.

#### methods

Then the [**`methods`**](https://v1.vuejs.org/guide/events.html) block. Methods are closely interlinked to events because they are used as event handlers. Every time an event occurs, that method is called.&#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MRu3B_l6gfB5O6Z_1G_%2F-MRu3nh7k3y_zpKgHgfg%2Fscript2.png?alt=media\&token=64e0a7b1-5427-44bb-b398-20271e00953a)

In the **`<template>`** the **`widgetChangeHandler`** method **(4)** is called on click (**`v-on`** directive) to emit the value to the application that uses the button component.

{% hint style="info" %}
Note: we don’t have to use **`this.data.config`**, just **`this.config`**. Vue does provide a transparent binding for us. Using **`this.data.config`** will raise an error.
{% endhint %}

#### watch

Watchers are defined in the [**`watch`**](https://vuejs.org/v2/guide/computed.html#Watchers) block **(5)**: &#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MRuArPn7hYGCFR4Lcrt%2F-MRuBWC85UtZnRwiv7hO%2Fscript3.png?alt=media\&token=0c9795ca-9d2d-45d6-b9f6-0006cc54735f)

Watchers 'spy' on one property of the component state, and run a function when that property value changes.

#### props &#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MRuF2fOWB4wbqjIr1jn%2F-MRuFEX90L0upCKwBa5_%2Fscript4.png?alt=media\&token=611b6240-7d98-421c-ae20-bea2df6591bb)

The **`props`** block **(6)** defines variables, that are used in the Vue locally.&#x20;

### **\<style>**

**`<style>`** is where you write your CSS for the component. If you add a scoped attribute **`<style scoped>`** Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions but allows you to just write plain CSS.

{% hint style="info" %}
If you select a CSS pre-processor, you can add a lang attribute to the **`<style>`** tag so that the contents can be processed by Webpack at build time. For example, **`<style lang="scss">`** will allow you to use SCSS syntax in your styling information.
{% endhint %}

In the template project, the SCSS syntax is used to define the button's appearance (see [**CSS Properties Reference**](https://www.w3schools.com/cssref/default.asp)). You can have all the CSS in the \<style> part of the .vue file, but in the template, this part is imported from a separate **styles.scss** file:&#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MX78Bm8q41Ug0vcXQ8x%2F-MX79XohTKhOZ8yHlxot%2Fstyles.png?alt=media\&token=4bcaef48-c86f-4398-b0c8-00bd7d9911f4)

#### Widget padding&#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MX79tkKAmwWnT-HAFDw%2F-MX7A2WN0ek7mLeMRSDs%2Fscss.png?alt=media\&token=11a5afe7-7f1f-46b5-9be4-754bd021ac79)

All the CSS is defined in the **`button-widget`** class. If you want the widget field to occupy the entire cell on the dashboard  - set **`width`** and **`height`** to **`100%`**. A user will be able to adjust the widget field in the previewer or on the dashboard. Also, choose the **`background`** color.&#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MRyjDLn0C-Z4tncpO_9%2F-MRyjx7Lu44z3m8RcEIj%2Fwidget.gif?alt=media\&token=98808d16-bf6a-4028-ad06-770c0f187bb0)

#### Button field

Inside the **`button-widget`** the **`button`** appearance is nested:&#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MRyJp2aZjuO-MuV65zc%2F-MRyLWoYLyyL0X3U5tEn%2Fstyle2.png?alt=media\&token=10442247-9fbb-4457-a682-9bc232749e77)

Here you can define the button text color, font-size, and others (see [**CSS Properties Reference**](https://www.w3schools.com/cssref/default.asp)).

{% hint style="info" %}
Note that nested definition is made with underscores and a reference to the nested part of the style definition looks like **`button-widget__button`**. See the [**`<template>`**](/creators-studio/new-component-creation-tutorial/vue.js-for-components-creation.md#less-than-template-greater-than) block.
{% endhint %}

#### Cursor and hover

Deeper in nesting: &#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MX79tkKAmwWnT-HAFDw%2F-MX7AVnDZAEeCO1_Iy3a%2Fscss2.png?alt=media\&token=a29864f8-4185-4c29-9cbc-0001bac343cc)

The first selector defines the cursor appearance over the button (See [**CSS Selectors Reference**](https://www.w3schools.com/cssref/css_selectors.asp)).

**`medium`** custom property defines minimal height and padding of the button.

**`contained`** defines the button\`s **`background-color`** and the color on hover (again, nested in **`contained`**).

{% hint style="info" %}
Note how to call these nested definitions using the nesting path: **`button-widget__button--contained`**. See the [**`<template>`**](/creators-studio/new-component-creation-tutorial/vue.js-for-components-creation.md#less-than-template-greater-than) block.
{% endhint %}

##