# Components

Lyra includes a system that allows you to add extra functionality either by creating your own components or by importing from third parties.

These components allow you to have your own API paths, JavaScript scripts, styles and even implement your own Vue.js components.

# Creating a component

To create a component it is necessary to execute the following command by passing it the vendor and the name in "snake case", for example, sertxudeveloper/test-component.

The components created are located in the lyra-components folder within the web application.

# Register a component

After creating or importing a component and installing the necessary dependencies, you need to register it in the panel menu in order to start using it.

The registration of a component is very similar to that of a resource. The following is an example of a record.

[
  "name" => "Test Component",
  "key" => "test-component",
  "icon" => "fas fa-question",
  "component" => \SertxuDeveloper\Testcomponent\Testcomponent::class
]

Remember that if you are using the advanced mode, you must assign the relevant permissions so that the different roles can use the components.

# Registration of routes, assets, styles and scripts

Depending on whether you want to register API paths, an asset, a CSS style or a JavaScript script, you must use one method or the other.

These methods must be used in the boot method of the main class of the component. Since Lyra, when registering a component in the menu will be in charge of executing this method to register the files and paths of the component.

Below you will find different examples depending on the type of file you want to register.

# Register API route

To register an API path file you should follow the example below.

Lyra::route('test-component', __DIR__ . '/../routes/api.php');

To access the paths in that file you should note that first Lyra adds the /components prefix to the component paths, then the name of the component that receives the first parameter is added as a prefix.

Thus, following the example above, if you have registered the path /test it should be accessed as /components/test-component/test.

# Register asset

To register an asset you should follow the example below.

Lyra::asset('test-component-picture', __DIR__ . '/../dist/img/picture.png');

Please note that the name of the asset must be unique, otherwise you may overwrite an existing route.

# Register CSS style

To register a CSS style you should follow the example below.

Lyra::style('test-component-style, __DIR__ . '/../dist/css/component.css');

Please note that the CSS style name must be unique, otherwise it may overwrite an existing path.

# Register JavaScript script

To register a JavaScript script you should follow the example below.

Lyra::script('test-component-script, __DIR__ . '/../dist/js/component.js);

Please note that the name of the JavaScript script must be unique, otherwise it may overwrite an existing path.

The scripts will be added at the end of the HTML <body> tag.

← Observables