Add Filament page

app/Filament/Pages/Messages.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Filament\Pages;
+
+use Filament\Pages\Page;
+use Filament\Support\Facades\FilamentView;
+use Filament\View\PanelsRenderHook;
+use Illuminate\Foundation\Vite;
+
+class Messages extends Page
+{
+    protected static ?string $navigationIcon = 'heroicon-o-document-text';
+
+    protected static string $view = 'filament.pages.messages';
+
+    public function mount()
+    {
+        FilamentView::registerRenderHook(
+            PanelsRenderHook::HEAD_END,
+            fn () => app(Vite::class)([
+                'resources/js/mingles/Message/index.js',
+                'resources/js/mingles/Toaster/index.js',
+                'resources/js/mingles/TodoList/index.js',
+                'resources/js/mingles/HelloWorld/index.jsx',
+            ])
+        );
+    }
+}

app/Providers/Filament/AdminPanelProvider.php

@@ -30,6 +30,7 @@ public function panel(Panel $panel): Panel
             ->colors([
                 'primary' => Color::Indigo,
             ])
+            ->viteTheme('resources/css/filament/admin/theme.css')
             ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
             ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
             ->pages([

package.json

@@ -6,14 +6,16 @@
         "build": "vite build"
     },
     "devDependencies": {
-        "@tailwindcss/forms": "^0.5",
-        "@tailwindcss/typography": "^0.5",
-        "autoprefixer": "^10.4",
+        "@tailwindcss/forms": "^0.5.7",
+        "@tailwindcss/typography": "^0.5.10",
+        "autoprefixer": "^10.4.19",
         "laravel-vite-plugin": "^1.0.0",
+        "postcss": "^8.4.38",
+        "postcss-nesting": "^12.1.0",
         "resolve-url-loader": "^3.1",
         "sass": "^1.3",
         "sass-loader": "^8.0",
-        "tailwindcss": "^3.0",
+        "tailwindcss": "^3.4.1",
         "vite": "^5.0.0"
     },
     "dependencies": {

resources/css/filament/admin/tailwind.config.js

@@ -0,0 +1,13 @@
+import preset from '../../../../vendor/filament/filament/tailwind.config.preset'
+
+export default {
+    presets: [preset],
+    content: [
+        './app/**/*.php',
+        './vendor/filament/**/*.blade.php',
+        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
+        "./storage/framework/views/*.php",
+        "./resources/views/**/*.blade.php",
+        "./resources/js/**/*.{js,jsx,vue}",
+    ],
+}

resources/css/filament/admin/theme.css

@@ -0,0 +1,3 @@
+@import '/vendor/filament/filament/resources/css/theme.css';
+
+@config 'tailwind.config.js';

resources/views/filament/pages/messages.blade.php

@@ -0,0 +1,11 @@
+<x-filament-panels::page>
+    <div>
+        @livewire(\App\Livewire\Message::class)
+
+        @livewire(\App\Livewire\HelloWorld::class)
+
+        @livewire(\App\Livewire\TodoList::class)
+
+        <livewire:toaster />
+    </div>
+</x-filament-panels::page>

vite.config.js

@@ -28,6 +28,7 @@ export default defineConfig({
                 'resources/js/mingles/Message/index.js',
                 'resources/js/mingles/TodoList/index.js',
                 'resources/js/mingles/Toaster/index.js',
+                'resources/css/filament/admin/theme.css',
                 'resources/sass/app.scss',
                 'resources/js/app.js',
             ],