Installation

Prerequisites#

If you have Tailwind and Bouncer pre-installed, you can move on to the Installation section.

1) Tailwind Installation#

Install Tailwind as shown below:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Next, generate your tailwind.config.js file:

npx tailwindcss init

In your tailwind.config.js file, configure the purge option with the paths to all of your Blade templates and JavaScript components so Tailwind can tree-shake unused styles in production builds:

module.exports = {
  purge: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

In your webpack.mix.js, add tailwindcss as a PostCSS plugin:

mix
  .js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [require("tailwindcss")]);

Open the ./resources/css/app.css file and add the following code, replacing the original file contents:

/* ./resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Next, import your stylesheet in your main Blade layout (commonly resources/views/layouts/app.blade.php or similar) and add the responsive viewport meta tag if it's not already present:

 <!doctype html>
  <head>
    <!-- ... --->
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link href="{{ asset('css/app.css') }}" rel="stylesheet">
  </head>
  <!-- ... --->

2) Bouncer Installation#

Install Bouncer with composer:

composer require silber/bouncer v1.0.0-rc.10

Add Bouncer's trait to your user model:

use Silber\Bouncer\Database\HasRolesAndAbilities;

class User extends Model
{
    use HasRolesAndAbilities;
}

Publish Bouncer's migrations to your app's migrations directory by running the following command:

php artisan vendor:publish --tag="bouncer.migrations"

Installation#

Install the Sharedo package with composer as shown below:
composer require geekyants/sharedo
After installation, move the package's config file to your project's config folder:
php artisan vendor:publish --tag="config"
Moving forward, scaffold the view components present in the sharedo package as follows:
php artisan ui sharedo
A Sharedo folder containing Vue.js components will be created in your resources directory. You can now easily customise your Sharedo's Vuejs components 🚀
Now, run the migrations. After executing this command, Bouncer migrations and the new_users_sharedo table will be migrated:
php artisan migrate
To compile and minify the CSS and JavaScript files generated by sharedo, add this to your webpack.mix.js file:
.js("resources/js/sharedo.js", "public/js")
.vue()
Note: If your css is not compiled in your app.css file, you can change it in the sharedo.blade.php file.
Install the dependencies:
composer install
npm install
Finally, build your assets as shown below:
npm run dev