id | title | sidebar_label | slug |
---|---|---|---|
installation |
Installation |
Installation |
/installation |
If you have Tailwind and Bouncer pre-installed, you can move on to the Installation section.
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>
<!-- ... --->
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"
-
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