> ## Documentation Index
> Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Installation
export const EditOnGitHub = ({version, path}) => {
const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`;
return ;
};
export const Footer = () => {
const sponsorsByTier = JSON.parse(`{
"agency_partner": [
{
"name": "Kirschbaum",
"url": "https://kirschbaumdevelopment.com/solutions/filament-development",
"filename": "kirschbaum.svg"
}
],
"gold": [
{
"name": "Agiledrop",
"url": "https://www.agiledrop.com/laravel?utm_source=filament",
"filename": "agiledrop.svg"
},
{
"name": "Baiz.ai",
"url": "https://baiz.ai",
"filename": "baiz-ai.svg"
},
{
"name": "CMS Max",
"url": "https://cmsmax.com?ref=filamentphp.com",
"filename": "cms-max.svg"
},
{
"name": "Mailtrap",
"url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament",
"filename": "mailtrap.svg"
},
{
"name": "SerpApi",
"url": "https://serpapi.com/?utm_source=filamentphp",
"filename": "serpapi.svg"
}
]
}`);
function shuffleArray(items) {
const result = [...items];
for (let index = result.length - 1; index > 0; index--) {
const randomIndex = Math.floor(Math.random() * (index + 1));
[result[index], result[randomIndex]] = [result[randomIndex], result[index]];
}
return result;
}
const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors));
return ;
};
## Requirements
Filament has a few requirements to run:
* PHP 8.0+
* Laravel v8.0+
* Livewire v2.0+
Notifications come pre-installed inside the [admin panel 2.x](../admin/installation), but you must still follow the installation instructions below if you're using it in the rest of your app.
First, require the notifications package using Composer:
```bash theme={"theme":"gruvbox-dark-hard"}
composer require filament/notifications:"^2.0"
```
## New Laravel projects
To get started with notifications quickly, you can set up [Livewire](https://laravel-livewire.com), [Alpine.js](https://alpinejs.dev) and [Tailwind CSS](https://tailwindcss.com) with these commands:
```bash theme={"theme":"gruvbox-dark-hard"}
php artisan notifications:install
npm install
npm run dev
```
> These commands will ruthlessly overwrite existing files in your application, hence why we only recommend using this method for new projects.
You're now ready to start [sending notifications](./sending-notifications)!
## Existing Laravel projects
The package uses the following dependencies:
* [Alpine.js](https://alpinejs.dev)
* [Alpine Floating UI](https://github.com/awcodes/alpine-floating-ui)
* [PostCSS](https://postcss.org)
* [Tailwind CSS](https://tailwindcss.com)
You may install these through NPM:
```bash theme={"theme":"gruvbox-dark-hard"}
npm install alpinejs @awcodes/alpine-floating-ui postcss tailwindcss --save-dev
```
### Configuring Tailwind CSS
To finish installing Tailwind, you must create a new `tailwind.config.js` file in the root of your project. The easiest way to do this is by running `npx tailwindcss init`.
In `tailwind.config.js`, add custom colors used by notifications:
```js theme={"theme":"gruvbox-dark-hard"}
import colors from 'tailwindcss/colors'
export default {
content: [
'./resources/**/*.blade.php',
'./vendor/filament/**/*.blade.php',
],
theme: {
extend: {
colors: {
danger: colors.rose,
primary: colors.blue,
success: colors.green,
warning: colors.yellow,
},
},
},
}
```
Of course, you may specify your own custom `primary`, `success`, `warning` and `danger` colors, which will be used instead.
### Bundling assets
New Laravel projects use Vite for bundling assets by default. However, your project may still use Laravel Mix. Read the steps below for the bundler used in your project.
#### Vite
If you're using Vite, you should manually install [Autoprefixer](https://github.com/postcss/autoprefixer) through NPM:
```bash theme={"theme":"gruvbox-dark-hard"}
npm install autoprefixer --save-dev
```
Create a `postcss.config.js` file in the root of your project, and register Tailwind CSS and Autoprefixer as plugins:
```js theme={"theme":"gruvbox-dark-hard"}
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
```
You may also want to update your `vite.config.js` file to refresh the page after Livewire components have been updated:
```js theme={"theme":"gruvbox-dark-hard"}
import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
],
}),
],
});
```
#### Laravel Mix
In your `webpack.mix.js` file, register Tailwind CSS as a PostCSS plugin:
```js theme={"theme":"gruvbox-dark-hard"}
const mix = require('laravel-mix')
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
])
```
### Configuring styles
In `/resources/css/app.css`, import [Tailwind CSS](https://tailwindcss.com):
```css theme={"theme":"gruvbox-dark-hard"}
@tailwind base;
@tailwind components;
@tailwind utilities;
```
### Configuring scripts
In `/resources/js/app.js`, import [Alpine.js](https://alpinejs.dev), Alpine Floating UI and the `filament/notifications` plugin, and register them:
```js theme={"theme":"gruvbox-dark-hard"}
import Alpine from 'alpinejs'
import AlpineFloatingUI from '@awcodes/alpine-floating-ui'
import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm'
You are currently viewing the documentation for Filament 2.x, which is a previous version of Filament.
Looking for the current stable version? Visit the [5.x documentation](/5.x/notifications).
Alpine.plugin(AlpineFloatingUI)
Alpine.plugin(NotificationsAlpinePlugin)
window.Alpine = Alpine
Alpine.start()
```
### Compiling assets
Compile your new CSS and JS assets using `npm run dev`.
### Configuring layout
Finally, create a new `resources/views/layouts/app.blade.php` layout file for Livewire components:
```blade theme={"theme":"gruvbox-dark-hard"}
{{ config('app.name') }}
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
@livewireScripts
@stack('scripts')
{{ $slot }}
@livewire('notifications')
```
You're now ready to start [sending notifications](./sending-notifications)!
## Publishing configuration
If you wish, you may publish the configuration of the package using:
```bash theme={"theme":"gruvbox-dark-hard"}
php artisan vendor:publish --tag=notifications-config
```
## Upgrading
To upgrade the package to the latest version, you must run:
```bash theme={"theme":"gruvbox-dark-hard"}
composer update
php artisan filament:upgrade
```
We recommend adding the `filament:upgrade` command to your `composer.json`'s `post-update-cmd` to run it automatically:
```json theme={"theme":"gruvbox-dark-hard"}
"post-update-cmd": [
// ...
"@php artisan filament:upgrade"
],
```
)}
Your logo here