New Component Guide Overview
Last updated
Last updated
For a one-time purpose, you may want to use the function component and combinations of other core components in the Apps Editor.
But it's a good idea to make some logic easily reusable and maybe earn decent money on selling components.
If you are familiar with JavaScript and TypeScript follow this tutorial to create a new component for the Applications Editor.
When creating a new component project you get an src folder with three folders and two more .json files and tsconfig.json file in the root:
tsconfig.json - a configuration file as the project uses TypeScript.
components - in this folder each component of the project has its subfolder. The template contains two example components: example-uppercase and example-button.
component.js - a component logic file. In each component folder.
component.html - a component appearance settings file. In each component folder.
icons folder - for Apps Editor workspace appearance icons. In each component folder.
UI folder - with .vue and styles.scss files as Vue.js is used for UI components. In each UI component folder.
Additional TypeScript modules for composing UI components in Vue.js are in shared and typings folders.
config.json - a configuration file. Here the components are registered.
Plus the Apps Editor will add
app-component.json - a file that allows you to test your component before releasing it.
If your project contains more than one component it should have a separate folder for each of them.
In each component`s folder, there is a folder for an icon file. But you may have no need in the icon folder and file if you use Font Awesome pics (see Component Styling Guide).
Before going deeper into the component project structure please, go through the Your First Component guide.
