diff --git a/demo/app/Providers/AppServiceProvider.php b/demo/app/Providers/AppServiceProvider.php
index c7bc88a1c..49185f5ee 100644
--- a/demo/app/Providers/AppServiceProvider.php
+++ b/demo/app/Providers/AppServiceProvider.php
@@ -2,8 +2,8 @@
 
 namespace App\Providers;
 
-use App\Support\Vite;
 use Code16\Sharp\SharpServiceProvider;
+use Code16\Sharp\View\Components\Vite as SharpViteComponent;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
@@ -12,7 +12,10 @@ public function register()
     {
         $this->app->register(SharpServiceProvider::class);
 //        $this->app->bind(SharpUploadModel::class, Media::class)
-        $this->app->singleton(\Illuminate\Foundation\Vite::class, Vite::class);
+
+        $this->app->bind(SharpViteComponent::class, function () {
+            return new SharpViteComponent(hotFile: base_path('../resources/assets/dist/hot'));
+        });
     }
 
     public function boot()
diff --git a/demo/app/Support/Vite.php b/demo/app/Support/Vite.php
deleted file mode 100644
index df7adffe7..000000000
--- a/demo/app/Support/Vite.php
+++ /dev/null
@@ -1,17 +0,0 @@
-<?php
-
-namespace App\Support;
-
-class Vite extends \Illuminate\Foundation\Vite
-{
-    public function __invoke($entrypoints, $buildDirectory = null)
-    {
-        if ($buildDirectory === '/vendor/sharp') {
-            $this->useHotFile(base_path('../resources/assets/dist/hot')); // allow "npm run dev" (in sharp directory)
-        }
-
-        return tap(parent::__invoke($entrypoints, $buildDirectory), function () {
-            $this->useHotFile(public_path('/hot'));
-        });
-    }
-}
diff --git a/demo/config/sharp.php b/demo/config/sharp.php
index 40c22428e..8c195935b 100644
--- a/demo/config/sharp.php
+++ b/demo/config/sharp.php
@@ -70,6 +70,7 @@
                 'resources/css/sharp-extension.css',
             ],
         ],
+        'activate_custom_fields' => true,
     ],
 
     'markdown_editor' => [
diff --git a/demo/resources/js/sharp-plugin.js b/demo/resources/js/sharp-plugin.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/resources/views/vendor/sharp/partials/plugin-script.blade.php b/demo/resources/views/vendor/sharp/partials/plugin-script.blade.php
new file mode 100644
index 000000000..6ea4a9cc8
--- /dev/null
+++ b/demo/resources/views/vendor/sharp/partials/plugin-script.blade.php
@@ -0,0 +1,2 @@
+
+@vite('resources/js/sharp-plugin.js')
diff --git a/demo/vite.config.js b/demo/vite.config.js
index ca28bde4e..125c3c782 100644
--- a/demo/vite.config.js
+++ b/demo/vite.config.js
@@ -4,6 +4,7 @@ import laravel from 'laravel-vite-plugin';
 export default defineConfig({
     plugins: [
         laravel([
+            'resources/js/sharp-plugin.js',
             'resources/css/sharp-extension.css',
         ]),
     ],
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 59c027689..91c56e0f8 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -11,10 +11,12 @@
         {{ $title ?? null }}
     </x-sharp::title>
 
-    @vite([
-        'resources/assets/sass/vendors.scss',
-        'resources/assets/sass/app.scss'
-    ], '/vendor/sharp')
+    <x-sharp::vite>
+        @vite([
+            'resources/assets/sass/vendors.scss',
+            'resources/assets/sass/app.scss'
+        ], '/vendor/sharp')
+    </x-sharp::vite>
 
     <x-sharp::root-styles />
 
@@ -22,12 +24,17 @@
 
     @include('sharp::partials.head')
 
-    @vite('resources/assets/js/client-api.js', '/vendor/sharp')
+    <x-sharp::vite>
+        @vite('resources/assets/js/client-api.js', '/vendor/sharp')
+    </x-sharp::vite>
 
     <x-sharp::extensions.custom-fields-script />
 
     <script defer src="/vendor/sharp/lang.js?version={{ sharp_version() }}&locale={{ app()->getLocale() }}"></script>
-    @vite('resources/assets/js/sharp.js', '/vendor/sharp')
+
+    <x-sharp::vite>
+        @vite('resources/assets/js/sharp.js', '/vendor/sharp')
+    </x-sharp::vite>
 </head>
 <body {{ $attributes }}>
     <x-sharp::alert.assets-outdated />
diff --git a/src/View/Components/Vite.php b/src/View/Components/Vite.php
new file mode 100644
index 000000000..dd4a60468
--- /dev/null
+++ b/src/View/Components/Vite.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace Code16\Sharp\View\Components;
+
+
+use Illuminate\View\Component;
+
+class Vite extends Component
+{
+    public function __construct(?string $hotFile = null)
+    {
+        \Illuminate\Support\Facades\Vite::useHotFile($hotFile ?? public_path('vendor/sharp/hot'));
+    }
+
+    public function render(): string
+    {
+        return '{{ $slot }}{{ $append() }}';
+    }
+
+    public function append(): void
+    {
+        \Illuminate\Support\Facades\Vite::useHotFile(public_path('hot')); // reset to default hot file location
+    }
+}
