TallStackUI, Component Prefix

Since TallStackUI offers a variety of components, you may encounter a component name conflict at some point. For example, if you initialize a project using Laravel Breeze - which offers a Blade component called dropdown - then there will be a conflict. In such cases, the best thing to do is to use the prefix component. The process is simple, but there is a downside: you need to remember to ALWAYS use the prefix on any TallStackUI components that you want to use.

There are three different ways to prefix the TallStackUI components that you want to use. We will describe each option below, but first it is important to know that you can apply the same prefix to the examples here in the documentation so that you can copy any documentation examples with your own prefix, which will make your day easier. Just press the Prefixing Examples at the left side of this page and set your desired prefix.

# Configuration File

As you can imagine, TallStackUI has a very complete configuration file, and there you can configure the prefix, however keep in mind that you need to publish the configuration file to perform this process.

Run this command to publish the configuration file:

php artisan vendor:publish --tag=tallstackui.config

The file created in the config/tallstackui.php . Open the file and set the prefix:

<?php
 
use TallStackUi\View\Components;
 
return [
    /*
    |--------------------------------------------------------------------------
    | Prefix
    |--------------------------------------------------------------------------
    |
    | Control a prefix for the TallStackUI components. The term here will be used
    | to prefix all TallStackUI components. This is useful to avoid conflicts
    | with other components registered by other libraries or created by yourself.
    |
    | For example: prefixing as 'ts-', the `alert` usage will be: '<x-ts-alert />'
    */
    'prefix' => env('TALLSTACKUI_PREFIX'), 
    'prefix' => 'ts-', 
 
    // ...

Run the following command after setting the prefix: php artisan optimize:clear

# Environment Variable

To avoid the need to publish the configuration file described above, you can set the prefix via an environment variable, which makes this task extremely easy:

TALLSTACKUI_PREFIX="ts-"

Run the following command after setting the prefix: php artisan optimize:clear

# Command

Even easier, run this command:

php artisan tallstackui:setup-prefix

Behind the scenes, TallStackUI will create the environment variable TALLSTACKUI_PREFIX with the defined prefix for you. Run the following command after setting the prefix: php artisan optimize:clear

# Using Prefix

When setting a prefix, all you need to do is set your chosen prefix BEFORE the component name, in all TallStackUI components you want to use, for example:

<!-- Prefixing: "ts-" -->
 
<x-alert /> 
<x-ts-alert /> 
 
<x-modal /> 
<x-ts-modal /> 
 
<!-- Prefixing: "foo" -->
 
<x-alert /> 
<x-fooalert /> 
 
<x-modal /> 
<x-foomodal />