Use JavaScript

The basis of the platform in terms of styles is Bootstrap, and the browser executes the code Stimulus, you do not need to use them.

Let's build a basic example that displays the text entered the field for this:

In resources/js, create the following structure:

├── js
│   ├── controllers
│   │   └── hello.js
│   └── dashboard.js
├── lang
├── sass
└── views

Controller class with the following content:

// hello.js
export default class extends window.Controller {

    static get targets() {
        return [ "name", "output" ]

    greet() {
        this.outputTarget.textContent =
            `Hello, ${this.nameTarget.value}!`

And the assembly point:

// dashboard.js
import HelloController from "./controllers/hello"

application.register("hello", HelloController);

Such a structure will not prevent your application, no matter what kind of front-end to build: Angular/React/Vue, etc.

It remains only to describe the assembly in webpack.mix.js:

let mix = require('laravel-mix');

mix.js('resources/js/dashboard.js', 'public/js')

It remains only to connect the received script to the panel in the configuration file or in the service provider using the registerResource method. You can do the same with style sheets, which will allow you to effectively build application logic.

class ServiceProvider extends ServiceProvider
    public function boot(Dashboard $dashboard)

To display, we will use a template for which you first need to define the Controller and Route in your application:

// hello.blade.php
<div data-controller="hello">
  <input data-target="" type="text">

  <button data-action="click->hello#greet">

  <span data-target="hello.output">