This demo project contains 3 components to do different things.

1. A custom field input for forms.
2. A data source which updates a global store.
3. A display component which renders the output of the global store.

• Clone the project to your computer
• Setup your database, vhosts etc within your .env
• Run composer install and npm install followed by npm run dev
• Run the laravel migrations with php artisan migrate

• Create a Backpack user as normal, then login!
• Browse to the "User" CRUD and see the custom form element.
• Use the shared state input in the sidebar to manipulate the data store.

Each commit message contains basic instructions on what is going on during the commit.

Gradually it builds up the code base into what is shown here.

Below is a copy/paste of the steps taken - View the actual commits to see the code changes.

Add a new asset pipeline for your backpack assets using Laravel Mix

Create your entry files e.g. backpack.js and backpack.scss

Within our CSS file we simply append some text for evidence that our CSS is loaded

Then we've run npm run watch which has generated our mix manifest, which we will use later!

We publish the "scripts" blade template from the vendor folder to allow us to globally add our custom scripts

At the bottom after everything else has loaded we use the mix helper to import our CSS and our JS

We add it at the end for perceived performance and to make sure everything else has loaded.

We add the field that we want to create into our Crud Controller - setting the "type" to the name of the new blade file we're going to create

We replicate an existing input field to make sure we still have the ability to use things like "hints"

We then reference the input field as a prop for our custom react component which we'll create later so we can update the value of the input via our Vue component.

We then create our react component, doing what ever we need. This example imports an free "password strength" package which we interface with.

We are listening for the change event on line 17 and 8 to update the actual form element with the value returned from the password package.

At the bottom we create a loop which maps the html tag in our blade file "password-meter" to the above component passing in a reference to the input field.

We should now have a fully working custom field built with vue. If you're still running npm run watch this should have loaded for you.

We can confirm it's working in the next step.

Here we just create a duplicate field, which displays the raw value of the database to prove that our component is updating the database!

Shared State - As each react component runs in its own "root" this means if you want to share state between multiple components you must use a "store" which all required components subscribe to rather than passing down via props.

Shared State - To simply display the output in the top left bar of the website.

We do this by creating a component which imports the store (using react-easy-state), we decorate it with easy states view() helper to make it reactive.

We register it as well in the backpack.js

Render the component by editing the published backpack template

Shared State - Keeping it all in sync with other data sources.

We create a new component which also imports the store

This component however has a text box which allows us to mutate the data within the store.

We register it as well in the backpack.js

We also render it within our template!

You can now see, if you start typing in the sidebar which updates the global store, all other components which share this data will also update!

This allows you to easily keep data in sync across multiple components.