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

The rest of the files - .html and .js - and icons subfolder are the same as in the example-uppercase instance.

ExampleButton.vue

The file with the Vue.js framework content. It is built in the one-file style - see 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.

In a template for a UI element component the ExampleButton.vue file follows the one-file style.

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.

In the instance two Vue.js directives are used: v-if - conditional rendering (see the v-if documentation), and v-on - event handling (see the v-on documentation).

v-if directive renders the block if config returns 'true'.

v-on directive calls the widgetChangeHandler method when a click happens. (See the <script> block).

Styles for the widget are defined lower in the <style> 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.

In the instance here defined data, methods, watchers, and props (inputs).

import

The first part of this block is the import of two objects from the helpers.js module (1).

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 block. Methods are closely interlinked to events because they are used as event handlers. Every time an event occurs, that method is called.

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.

watch

Watchers are defined in the watch block (5):

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

props

The props block (6) defines variables, that are used in the Vue locally.

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

In the template project, the SCSS syntax is used to define the button's appearance (see CSS Properties Reference). 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:

Widget padding

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.

Button field

Inside the button-widget the button appearance is nested:

Here you can define the button text color, font-size, and others (see CSS Properties Reference).

Cursor and hover

Deeper in nesting:

The first selector defines the cursor appearance over the button (See CSS Selectors Reference).

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