jeroennoten / Laravel-AdminLTE

Easy AdminLTE integration with Laravel
MIT License
3.84k stars 1.08k forks source link

[QUESTION] How to get plugins working when using laravel_mix #1030

Closed stoneC0der closed 2 years ago

stoneC0der commented 2 years ago

Environment

Complete the next environment information.

Item Version
Laravel 8.76.2
Project 3.6
OS Xubuntu 20.4

I am currently using the package with laravel mix to compile the assets, everything work so far, I have always use custom code for almost everything but now I am trying to follow the package directive/implementation.

I got Toastr woring when directly including the cdn in the layout template extended from admin::page but when I configure the plugin in conf/adminlte.php the assets are not being injected nor the cdn links My guess is,it is proabably because I am using laravel_mix so how to I fix that please

After installing the plugin the assets were publish in /public/vendor/toastr folder

Setup

I created a separate js file for adminlte like so ressources/assets/js/admin/app.js content:

    require('.././bootstrap');
    require('hideshowpassword');
    // var Dropzone = require('dropzone');
    var password = require('password-strength-meter');
    require('overlayscrollbars');
    require('bootstrap');
    require('../../../../vendor/almasaeed2010/adminlte/dist/js/adminlte');

ressources/assets/sass/admin-css.scss content:

```css
// Fonts
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic');
@import '~@fortawesome/fontawesome-free/css/all.css';
// OverlayScrollbars
@import '~overlayscrollbars/css/OverlayScrollbars.css';
// iCheck
@import '~icheck-bootstrap/icheck-bootstrap.css';
// AdminLTE
@import '../../../vendor/almasaeed2010/adminlte/dist/css/adminlte.css';
// Bootstrap
// Already imported by AdminLTE
//@import '~bootstrap/scss/bootstrap';
```

Webpack.mix

```js
mix.js('resources/assets/js/app.js', 'public/js')
.vue({
    extractStyles: true,
    globalStyles: false
})
.sass('resources/assets/sass/app.scss', 'public/css')
.js('resources/assets/js/admin/app.js', 'public/js/admin')
.sass('resources/assets/sass/admin-css.scss', 'public/css')
.version();
```

plugin setting:

 ```php
   'toastr'    => [
           'active'    => true,
           'files'     => [
            [
                'type'  => 'css',
                'asset' => false,
                'location' => 'https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css'
            ],
            [
                'type'  => 'js',
                'asset' => false,
                'location' => 'https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js'
            ]
        ]
    ]
```
dfsmania commented 2 years ago

Hi @stoneC0der , if you look at the master.php file, then you can see plugins are not included from configuration file when enabling Laravel Mix, instead unique compiled files are included. I believe you should include plugins on the Mix configuration in these cases, but I'm not familiarized with Mix in order to help you. Check issue #490 for some more details.

stoneC0der commented 2 years ago

Hi @Shidersz, thanks this how I solved it:

Extend the adminlte::page from layout/dashboard.blade.php in my case (or app.blade.php) add this @extends('adminlte::page') @push('css') {{-- Configured CSS --}} @include('adminlte::plugins', ['type' => 'css']) @endpush @push('js') {{-- Configured Scripts --}} @include('adminlte::plugins', ['type' => 'js']) @endpush

Then extend all your view from the dashboard or app template