The real time chat demo: Ping →



Make sure you a have a fresh Laravel 11 project up and running on your browser, without any starter kit. Yes, you can use maryUI with Jetstream/Breeze on your own projects, but let's keep things simple for now and start from the ground.

  • Fresh Laravel 11 project up and running.
  • No starter kit.
  • SQLite database.
laravel new myapp
Before proceed, we recommend you to make a local commit on each step to keep track of what is going on. After you have Laravel up and running it is time to commit.

Install maryUI

Make sure you have selected "Volt" during this install.

composer require robsontenorio/mary
php artisan mary:install

Then, start the dev server.

yarn dev # or `npm run dev`

... Check the browser!

We are using Livewire Volt, take a look at:

  • routes/web.php
  • resources/views/livewire/users/index.blade.php.
Check the source code diff and commit it.

Improving the example

You have a basic working example, but the data is hardcoded. Let's make it work with a real database and add some new models and relationships.

Creating models has nothing to do with maryUI. So, we have created a command to do it for you and speed things up. After running it, it is important to take a look at the database to see what is going on.

php artisan mary:bootcamp
  • Create a new Country model.
  • Create a new Languagemodel.
  • Create a User belongs to Country relationship.
  • Create a User many-to-many Language relationship.
  • Create their respective migrations/factories/seeders.
  • Randomly seed the database with users, countries, languages and its relationships.

If you hit the browser again, of course, nothing has changed. On the next topic we will work on that component.

Check the source code diff and commit it.