Installation
This package does not ship any custom CSS and relies on daisyUI and Tailwind for out-of-box styling. You can customize most of the components' styles, by inline overriding daisyUI and Tailwind CSS classes.
Automatic install
This package requires that you are installing Mary on a brand-new Laravel project, without any starter kit like Breeze or Jetstream.
The installer also includes a starter layout, a Welcome
component and its route.
composer require robsontenorio/mary php artisan mary:install
Then, start the dev server.
yarn dev
... You are done!
Renaming components
If for some reason you need to rename Mary components using a custom prefix, publish the config file.
php artisan vendor:publish --tag mary.config
return [ /** * Default is empty. * 'prefix' => '' * <x-button /> * <x-card /> * * Renaming all components: * 'prefix' => 'mary-' * <x-mary-button /> * <x-mary-card /> */ 'prefix' => ''];
php artisan view:clear
Manual install
If you have an existing Laravel project with a starter kit like Breeze or Jetstream, follow these steps.
Once Mary was primarily designed to work on fresh projects without starter kits, you will have to handle some conflicts by yourself, like component name collisions or existing settings.
Not all steps may apply for some starter kits.
# Livewire 3composer require livewire/livewire # Marycomposer require robsontenorio/mary # Tailwind and daisyUIyarn add -D tailwindcss daisyui@latest postcss autoprefixer && npx tailwindcss init -p
Add Mary and Daisy entries to tailwind.config.js
.
/** @type {import('tailwindcss').Config} */export default { content: [ // You will probably also need these lines "./resources/**/**/*.blade.php", "./resources/**/**/*.js", "./app/View/Components/**/**/*.php", "./app/Livewire/**/**/*.php", // Add mary "./vendor/robsontenorio/mary/src/View/Components/**/*.php" ], theme: { extend: {}, }, // Add daisyUI plugins: [require("daisyui")]}
Add Tailwind directives to resources/css/app.css
.
@tailwind base;@tailwind components;@tailwind utilities;
Setup Livewire default app template.
# This creates `views/components/layouts/app.blade.php`php artisan livewire:layout
Then add the @vite
directive on the default app template views/components/layouts/app.blade.php
.
<head> ... {{-- This --}} @vite(['resources/css/app.css', 'resources/js/app.js'])</head> <body>...</body>
Finally, start the dev server.
yarn dev
... You are done!