Filament•3mo ago

How to add NPM added assets to Filament.

I'm getting a little lost in the docs on this one. I'm looking to integrate https://swiperjs.com/ into a project and want to include the sources (js/css) in my project using NPM. $ npm install swiper Could anyone point me in the right direction as to what to do next to ensure the proper imports happen when the field is loaded? How do I access the assets added using NPM in my field and then how/where do I import?

// import Swiper bundle with all modules installed
import Swiper from 'swiper/bundle';

// import styles bundle
import 'swiper/css/bundle';

// import Swiper bundle with all modules installed
import Swiper from 'swiper/bundle';

// import styles bundle
import 'swiper/css/bundle';

Swiper

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

3 Replies

CGMOP•3mo ago

I think I'm making progress: https://filamentphp.com/docs/3.x/support/assets#overview I also see I need to add artisan filament:assets to my workflow.

Assets - Core Concepts - Filament

CGMOP•3mo ago

Is this reasonable to have in my service provider?

        FilamentAsset::register([
            Css::make('swiper-stylesheet', 'node_modules/swiper/swiper-bundle.min.css')->loadedOnRequest(),
            Js::make('swiper-script', 'node_modules/swiper/swiper-bundle.min.js')->loadedOnRequest(),
        ]);

        FilamentAsset::register([
            Css::make('swiper-stylesheet', 'node_modules/swiper/swiper-bundle.min.css')->loadedOnRequest(),
            Js::make('swiper-script', 'node_modules/swiper/swiper-bundle.min.js')->loadedOnRequest(),
        ]);

The files seem to be loading properly now using:

<div
    x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('swiper-stylesheet'))]"
    x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('swiper-script'))]"
/>

<div
    x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('swiper-stylesheet'))]"
    x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('swiper-script'))]"
/>

This doesn't really add them to my build process though, or is this how filament assets are supposed to work?
I feel like I'm missing a core thing here. I'm hoping it's only my implementation I need to debug from here, not getting the assets included properly. Something about including the .min.js files feels off though. A little more progress. It looks like i cannot lazy-load them when I include the field conditionally using livewire. I guess the scripts don't get loaded?

  FilamentAsset::register([
      Css::make('swiper-stylesheet', 'node_modules/swiper/swiper-bundle.min.css'),
      Js::make('swiper-script', 'node_modules/swiper/swiper-bundle.min.js'),
  ]);

  FilamentAsset::register([
      Css::make('swiper-stylesheet', 'node_modules/swiper/swiper-bundle.min.css'),
      Js::make('swiper-script', 'node_modules/swiper/swiper-bundle.min.js'),
  ]);

I don't like the idea of loading it everywhere, but this works for the time being.

toeknee•3mo ago

You need to create a custom theme: https://filamentphp.com/docs/3.x/panels/themes

Themes - Panel Builder - Filament

Gaming

Programming

How to add NPM added assets to Filament.