Andreas94's avatar

best practice to manage css and js by url

Hi guys,

Which is the best practice to manage js and css for url? for example, I have lots of JS plugins that need to appear only on certain pages like CKEditor, Select2 etc...

I currently use the @yield('css') and @yield('js')but now that I have to change the editor I find myself having to intervene in so many blades...

I had thought of creating a controller that depending on the url recalls the specific js and css, so I have all the css and js called in a single file, making the changes and additions easier.

What is your advice?

0 likes
3 replies
diegoaurino's avatar

Hello, @Andreas94 !

I don’t know if your project has restrictions to use Vue. I believe the easier approach is to wrap the editor inside a Vue component. Thus, you can use it anywhere without caring about how blade would manage those scripts. Also, check that there is an official CKEditor component for Vue: https://github.com/ckeditor/ckeditor5-vue  

Another option is to create a blade component. https://laravel.com/docs/5.8/blade#components-and-slots 

Hope this helps. Let me know.

Andreas94's avatar

I already use the blade component but it becomes dispersive when you go to change or add a plugin.

I found this laravel/packer, what do you think? honestly I wouldn't want to use VUE, also because I would like to load the plugins only when needed and not always call them in all the pages...

i have plugins like ckeditor, select2, dropzone, ckfinder, lightgallery, flatpickr, easypiechart, noty and many others that are recalled in 8 blades of about 20.

if (\Request::is('article/*')) {
  $css  =   "...";
  $js   =   "...";
} elseif (\Request::is('review/*')) {
  $css  =   "...";
  $js   =   "...";
}

use this method? is it too rough?

Please or to participate in this conversation.