WireUI - Docs

Page for WireUI documentation.

Visit at: https://livewire-wireui.com/

Contribute

Thank you for your interest in contributing! 😊

Please follow the steps below to run this project locally:

Get started 🚀

Requirements

• PHP 8.x
• Composer
• Yarn
• A valid Torchlight token (free for non-profit open-source projects).

Setup

STEP 1:

Fork this repository, click on "Fork" in this page.

STEP 2:

Clone your forked repository, run the command:

git clone https://github.com/YOUR-USERNAME/docs wireui-docs && cd wireui-docs

STEP 3:

WireUI Doc uses Torchlight to provide code highlighting.

Before continuing, you must register at https://torchlight.dev and get your access token.

The token will be required in the next step, and it should look like similar to:

torch_EFhVTgSra9HioAxtsK3ljnsj45BHmf

STEP 4: In your project folder, execute the run.sh script:

./run.sh

This script automate the process of installing dependencies and set up the .env file.

---

Doc syntax 📝

The WireUI Doc provides some components to facilitate the writing experience.

You are welcome to explore the code in resources/views/livewire/ folder to view real usage examples.

Code snippets

Code snippets should always be included using the <x-code> tag.

The mandatory attributes are language, for the code language and the contents, for the code itself. Or use a slot instead of the contents attribute.

For example:

//...
<x-code language="bash">
    php artisan vendor:publish --tag='wireui.config'
    php artisan vendor:publish --tag='wireui.resources'
    php artisan vendor:publish --tag='wireui.lang'
</x-code>

A copy button is loaded by default, to suppress the button, add the attribute: copy="false".

Likewise, line numbers are displayed by default. To remove the numbers, add the attribute: `:line-numbers="false".

<x-code no-copy :line-numbers="false" language="shell" :contents="Command exit with error error code xyz...." />

Text mark

When giving instructions or using technical words, highlight important information with the <x-mark> tag.

For example, when using:

Run <x-mark>npm install<x-mark> to install all to install all dependencies.

The outcome is similar to:

Run npm install to install all to install all dependencies.

Boxes

Sometimes it's crucial to highlight information such as a mandatory step or a compatibility issue. In these situations, situations, you should use the <x-alerts.warning> tag, which will produce a yellow "attention" box.

For example:

<x-alerts.warning>If you are using FooJS 1.0, you must configure bar=null before update.</x-alerts.warning>

In addition, if you need to provide a friendly message, a tip, or extra information, you should use of the <x-alerts.info> tag, which produces a blue info box.

<x-alerts.info>Read more about supported formats <a href="#formats">here.</a></x-alerts.info>

---

WireUI Doc runs on Laravel & Livewire.