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. Just run the command: php artisan vendor:publish --tag=tallstackui.config and set the prefix in the file created in the config/ folder.

<?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' => 'ts-', 
 
// ...

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

# Environment Variable

"I don't want to have to publish the configuration file for something so simple!", you might think, right? Well, that's why we provide an environment variable that you can use to set the prefix:

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 set a prefix, for example ts- , then all you need todo is set ts- BEFORE the component name, for example:

<!-- Prefixing: "ts-" -->
 
<x-alert /> 
<x-ts-alert /> 
 
<x-modal /> 
<x-ts-modal /> 
 
<x-slide /> 
<x-ts-slide /> 
 
<x-input /> 
<x-ts-input />