[FEATURE] Add support to LARAVEL VITE

[kungro]

Now in Laravel 9 vite is the default asset builder:

https://laravel.com/docs/9.x/vite

Can you please add support to vite in this library?

[dfsmania]

Hi @kungro , you have the possibility of publishing the package views to add such a customization. If you manage to implement the support, not conflicting with other previous feature, then you may create a pull request to include it on this package. Or you can share the changes you have done here so we can check what's need to be done on the package. I will be pleased of doing this in the future, but I'm currently out of time...

[dfsmania]

@kungro Usually, when I use this package I create a base layout for the entire web application (in resources/views/layouts/app.blade.php). So, to use vite I think you may create a base layout pushing the vite blade directive into the css section provided by this package, as shown on the next example:

{{-- Extends the AdminLTE page layout  --}}

@extends('adminlte::page')

{{-- Browser Title --}}

@section('title')
    {{ config('adminlte.title') }}
    @hasSection('subtitle') | @yield('subtitle') @endif
@stop

{{-- Page Content Header --}}

@section('content_header')
    @hasSection('content_header_title')
        <h1 class="text-muted">
            @yield('content_header_title')

            @hasSection('content_header_subtitle')
                <small class="text-lightblue">
                    <i class="fas fa-xs fa-angle-right text-muted"></i>
                    @yield('content_header_subtitle')
                </small>
            @endif
        </h1>
    @endif
@stop

{{-- Page Content Body --}}

@section('content')
    @yield('content_body')
@stop

{{-- Page Footer --}}

@section('footer')
    <div class="float-right d-none d-sm-block">
        {{-- Version number here --}}
    </div>

    <strong>
       {{-- Company name here --}}
    </strong>
@stop

{{-- Extra common CSS --}}

@push('css')
    @vite(['resources/css/app.css', 'resources/js/app.js'])
@endpush

Then, all your views should extend from this layout and use the sections provided by this new layout, example:

@extends('layouts.app')

{{-- Include plugins --}}

@section('plugins.OnePluginForThisView', true)
@section('plugins.AnotherPluginForThisView', true)

{{-- Customize layout sections --}}

@section('subtitle', "The browser's subtitle")
@section('content_header_title', "The view title")
@section('content_header_subtitle', "The view subtitle")

{{-- Content body: main page content --}}

@section('content_body')
    {{-- The main markup of the view here --}}
@stop

I hope this helps you!

[dfumagalli]

I have Vite installed and it works with this package. I did this:

1. Installed a new Laravel 10, no Javascript options enabled.
2. I installed the free Larastarters package.
3. On top of it, I installed this package.

[rats4final]

This is such a crucial feature, when can we expect an official implementation?

[dfsmania]

@rats4final Vite is supported, but not natively, see #1155 (comment)

For example, you may create a new layout extending the base layout provided by this package on resources/views/layouts/adminlte-with-vite.blade.php with vite support:

{{-- Extends the AdminLTE page layout  --}}

@extends('adminlte::page')

{{-- Add extra common CSS to support your vite configuration --}}

@push('css')
    @vite(['resources/css/app.css', 'resources/js/app.js'])
@endpush

Then, all your views should now extend from this new layout and just use it as it was the adminlte::page layout, for example:

@extends('layouts.adminlte-with-vite')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
    <p>Welcome to this beautiful admin panel.</p>
@stop

Please, try this and give feedback...

[dfsmania]

Closed, a solution was provided by extending the package layout.

[Apfelwurm]

Hey, i'm currently working on a new Laravel project and use your package for the first time. Am i right that there is not really a supported way of using static vite assets as logos for AdminLTE via the config? This would be a good idea to add, also an addition in the wiki would be a great thing, since vite is the new laravel standard. Would you merge a PR that adds native vite support?

[dfsmania]

@Apfelwurm You're right, there's no built-in support for vite currently, since it's easy to add it by extending the layout. However, a PR is welcome to add native support for it.