[RELEASE] AdminLTE v4 beta1 #3692

danny007in · 2021-05-13T20:51:08Z

(Alpha)-Release is online, you can install it with npm install admin-lte@next or npm install [email protected].

Online https://adminlte-v4.netlify.app

Check https://github.com/ColorlibHQ/AdminLTE

Install npm i for this you need Node,js

to build npm run production

to run npm run dev
then open go to http://localhost:3000/

then give some idea, or contribute 👍🏼

The text was updated successfully, but these errors were encountered:

tacman · 2021-05-16T13:29:43Z

Wahoo! Very exciting.

Obviously, lots more to do (login pages, right hand sidebar, etc.), but great to see that this is starting.

It appears to me that the BS5 changes from BS4 are not as significant as the BS3 to BS4 changes, dropping jquery of course is a big one. And changes to the data attributes to include -bs.

Do you think that getting the demo to work is going to be mostly HTML to change to support bs5, or changes to the AdminLTE CSS and JS files?

Root3287 · 2021-05-16T15:48:41Z

Do we have to compile using npm? Will there be compiled CSS/JS in the future?

danny007in · 2021-05-16T18:21:07Z

Do we have to compile using npm? Will there be compiled CSS/JS in the future?

Same as AdminLTE v3

MGatner · 2021-06-23T22:43:32Z

Thanks @REJack. I will build myself and see where I can hop in. Do you have any plans to make version 3 compatible with Bootstrap 5? Or is it 3.x => BS4, 4.x => BS5?

REJack · 2021-06-23T22:44:21Z

v3 will stuck on BS4

tacman · 2021-06-23T22:49:00Z

v3 will stuck on BS4

Great, too messy, especially without jQuery.

MGatner · 2021-06-24T15:50:43Z

In case it is helpful to anyone else I will be maintaining a distribution repo for version 4 until there is an official release: https://github.com/MGatner/adminlte4

sitchi · 2023-11-01T11:15:03Z

Are you planning to add a boxed layout?

umer936 · 2023-11-01T17:54:37Z

@danny007in sorry to hear that. Hope you're feeling better <3
Thanks for the work and support you do!

bhojkamal · 2023-12-13T07:04:33Z

is still the V4 in beta?

danny007in · 2023-12-22T01:21:48Z

Apologies for the beta version delay, my academic commitments have caused a delay. We're at 90% completion, and only the iframe implementation remains. We'll release it as soon as possible.

carry0987 · 2024-01-15T09:58:17Z

Apologies for the beta version delay, my academic commitments have caused a delay. We're at 90% completion, and only the iframe implementation remains. We'll release it as soon as possible.

Can't wait for it, the demo page of v4 is awesome !!

FaizullahFirozi · 2024-01-24T08:15:48Z

Also Add Admin-LTE-RTL

Right to left System Please
For Pashto, Arabic, persian.... languages

MikhaelMounay · 2024-02-21T05:38:36Z

Too grateful for what you are doing 💪❤️❤️.
Just wanted to ask if there is an estimated release date for stable V4 to use for new projects?
Thank you for your great work!

SharkMachine · 2024-02-23T16:26:09Z

I'm also grateful for your work but I have to voice my concerns.

Bootstrap 4 support has ended and we don't know if we're going to get security updates in the future
Bootstrap 6 might appear soon and in the worst case situation the only supported version of Bootstrap is 6.x and AdminLTE is still lacking version that supports Bootstrap 5.x

I'm going to be brutally honest here. I don't think this project will last if this trend continues. I'm most likely going to drop AdminLTE in my projects because it hasn't been able to keep up with Bootstrap.

Kroesss · 2024-02-24T09:37:13Z

I second that. Bootstrap 5 was initially released in May 2021. The fact that there is not even a beta-release is saying a lot in my opinion.

I think AdminLTE is really nice, but sadly it is lagging so far behind it is not a viable option anymore.

muhanadali100 · 2024-03-19T18:04:54Z

what happen to the stable version ?

jameslao · 2024-03-31T21:14:43Z

Creating theme customizer 🎨

Any progress on the customizer?

jameslao · 2024-03-31T21:21:44Z

I'm working with downstream repos like django-jazzmin, so would really love to see AdminLTE 4 in a working condition. I'd be happy to contribute if there's a viable way.

DPComp · 2024-04-14T17:22:20Z

When this will be release as master?
Any upgrade from 3.2 to 4.0 manual, even for beta release?
It has been years from now since the bootstrap 5 release! Did you guys abandon the project, @danny007in ?

danny007in · 2024-05-15T12:41:45Z

Hey everyone! I'm back after a break and will be finishing up the release of AdminLTE v4 beta soon.

carry0987 · 2024-05-15T14:24:47Z

Hey everyone! I'm back after a break and will be finishing up the release of AdminLTE v4 beta soon.

Thank you so much for the update! We're thrilled to hear that you're back and working on the AdminLTE v4 beta release. We're eagerly looking forward to exploring the new features and improvements you've worked on.

Excited for what's to come!

danny007in · 2024-05-29T07:43:08Z

AdminLTE beta1 released check out https://github.com/ColorlibHQ/AdminLTE/releases/tag/v4.0.0-beta1

juniwalk · 2024-05-29T07:46:51Z

@danny007in Is there v4 preview page?

carry0987 · 2024-05-29T07:53:44Z

@danny007in Is there v4 preview page?

@juniwalk
https://adminlte-v4.netlify.app

E-zh · 2024-06-17T06:23:14Z

Hi guys! Cane you help me? I'm use Laravel 11 + Inertia + Vue 3 + AdminLTE 4-beta.
How to init treeview in my vue component? This method not working:
$('[data-widget="treeview"]').Treeview('init')
And, AdminLTE 4 don't use jQuery.
Thanks

wizhippo · 2024-06-17T14:49:11Z

Hi guys! Cane you help me? I'm use Laravel 11 + Inertia + Vue 3 + AdminLTE 4-beta. How to init treeview in my vue component? This method not working: $('[data-widget="treeview"]').Treeview('init') And, AdminLTE 4 don't use jQuery. Thanks

JQuery is not used any more. Instead you would just use the attribute data-lte-toggle="treeview"

https://adminlte-v4.netlify.app/dist/pages/docs/javascript/treeview

E-zh · 2024-06-17T23:03:40Z

Hi guys! Can you help me? I'm use Laravel 11 + Inertia + Vue 3 + AdminLTE 4-beta. How to init treeview in my vue component? This method not working: $('[data-widget="treeview"]').Treeview('init') And, AdminLTE 4 don't use jQuery. Thanks

JQuery is not used any more. Instead you would just use the attribute data-lte-toggle="treeview"

https://adminlte-v4.netlify.app/dist/pages/docs/javascript/treeview

So I did. The problem is that after authorization and redirect to the admin panel, which uses Adminlte, the treeview does not work, the menu items are closed and do not expand. This happens specifically in the Vue component.
What other ideas might there be? Maybe you need to somehow initialize it in js?

wizhippo · 2024-06-18T15:30:04Z

Hi guys! Can you help me? I'm use Laravel 11 + Inertia + Vue 3 + AdminLTE 4-beta. How to init treeview in my vue component? This method not working: $('[data-widget="treeview"]').Treeview('init') And, AdminLTE 4 don't use jQuery. Thanks

JQuery is not used any more. Instead you would just use the attribute data-lte-toggle="treeview"
https://adminlte-v4.netlify.app/dist/pages/docs/javascript/treeview

So I did. The problem is that after authorization and redirect to the admin panel, which uses Adminlte, the treeview does not work, the menu items are closed and do not expand. This happens specifically in the Vue component. What other ideas might there be? Maybe you need to somehow initialize it in js?

I'm guessing the the elements don't exist at the time the default code runs to get all the elements with the data-lte-toggle attribute. You then should do so in your own code. You can look at

AdminLTE/src/ts/treeview.ts

Line 114 in 4f9b29d

onDOMContentLoaded(() => {

as an example and in your vue code do the same when the elemets do exisit.

E-zh · 2024-06-19T00:50:08Z

Hi guys! Can you help me? I'm use Laravel 11 + Inertia + Vue 3 + AdminLTE 4-beta. How to init treeview in my vue component? This method not working: $('[data-widget="treeview"]').Treeview('init') And, AdminLTE 4 don't use jQuery. Thanks

JQuery is not used any more. Instead you would just use the attribute data-lte-toggle="treeview"
https://adminlte-v4.netlify.app/dist/pages/docs/javascript/treeview

So I did. The problem is that after authorization and redirect to the admin panel, which uses Adminlte, the treeview does not work, the menu items are closed and do not expand. This happens specifically in the Vue component. What other ideas might there be? Maybe you need to somehow initialize it in js?

I'm guessing the the elements don't exist at the time the default code runs to get all the elements with the data-lte-toggle attribute. You then should do so in your own code. You can look at

AdminLTE/src/ts/treeview.ts

Line 114 in 4f9b29d

onDOMContentLoaded(() => {

as an example and in your vue code do the same when the elemets do exisit.

i get error: TypeError: Cannot read properties of undefined (reading 'onDOMContentLoaded')
I'm not quite sure how exactly to use this call, in the layout component? Or in the app.js of the project?

E-zh · 2024-06-19T00:52:23Z

My app.js file:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
//import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import '@popperjs/core';
import 'bootstrap';
import 'admin-lte';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    //resolve: (name) => resolvePageComponent(`./V1/Pages/**/${name}.vue`, import.meta.glob('./V1/Pages/**/*.vue')),
    resolve: name => {
        const pages = import.meta.glob('./V1/Pages/**/*.vue', { eager: true })
        let page;
        if (name.startsWith('Admin')) {
            page = pages[`./V1/Pages/Admin/${name}.vue`]
        } else {
            page = pages[`./V1/Pages/Site/${name}.vue`]
        }
        return page
    },
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

wizhippo · 2024-06-19T16:39:53Z

Hi guys! Can you help me? I'm use Laravel 11 + Inertia + Vue 3 + AdminLTE 4-beta. How to init treeview in my vue component? This method not working: $('[data-widget="treeview"]').Treeview('init') And, AdminLTE 4 don't use jQuery. Thanks

JQuery is not used any more. Instead you would just use the attribute data-lte-toggle="treeview"
https://adminlte-v4.netlify.app/dist/pages/docs/javascript/treeview

So I did. The problem is that after authorization and redirect to the admin panel, which uses Adminlte, the treeview does not work, the menu items are closed and do not expand. This happens specifically in the Vue component. What other ideas might there be? Maybe you need to somehow initialize it in js?

I'm guessing the the elements don't exist at the time the default code runs to get all the elements with the data-lte-toggle attribute. You then should do so in your own code. You can look at

AdminLTE/src/ts/treeview.ts

Line 114 in 4f9b29d

onDOMContentLoaded(() => {

as an example and in your vue code do the same when the elemets do exisit.

i get error: TypeError: Cannot read properties of undefined (reading 'onDOMContentLoaded') I'm not quite sure how exactly to use this call, in the layout component? Or in the app.js of the project?

You don't. You use it as an example and update your code that makes the menu and adds an event listener/treeview to the items.

E-zh · 2024-07-01T10:51:18Z

Hi guys! Can you help me? I'm use Laravel 11 + Inertia + Vue 3 + AdminLTE 4-beta. How to init treeview in my vue component? This method not working: $('[data-widget="treeview"]').Treeview('init') And, AdminLTE 4 don't use jQuery. Thanks

JQuery is not used any more. Instead you would just use the attribute data-lte-toggle="treeview"
https://adminlte-v4.netlify.app/dist/pages/docs/javascript/treeview

So I did. The problem is that after authorization and redirect to the admin panel, which uses Adminlte, the treeview does not work, the menu items are closed and do not expand. This happens specifically in the Vue component. What other ideas might there be? Maybe you need to somehow initialize it in js?

I'm guessing the the elements don't exist at the time the default code runs to get all the elements with the data-lte-toggle attribute. You then should do so in your own code. You can look at

AdminLTE/src/ts/treeview.ts

Line 114 in 4f9b29d

onDOMContentLoaded(() => {

as an example and in your vue code do the same when the elemets do exisit.

i get error: TypeError: Cannot read properties of undefined (reading 'onDOMContentLoaded') I'm not quite sure how exactly to use this call, in the layout component? Or in the app.js of the project?

You don't. You use it as an example and update your code that makes the menu and adds an event listener/treeview to the items.

It's working in vue component:

export default {
    mounted() {
        this.initAdminLTE();
    },
    methods: {
        initAdminLTE() {
            const script = document.createElement('script');
            script.src = '/admin-lte/adminlte.min.js';
            script.onload = () => {
                window.AdminLTE && window.AdminLTE.Treeview();
            };
            document.head.appendChild(script);
        }
    }
}

danny007in added level:breaking-change type:news version:4.x labels May 13, 2021

This comment has been minimized.

Sign in to view

This comment was marked as outdated.

Sign in to view

This comment has been minimized.

Sign in to view

This comment was marked as resolved.

Sign in to view

This comment was marked as outdated.

Sign in to view

This comment was marked as resolved.

Sign in to view

This comment was marked as outdated.

Sign in to view

umer936 mentioned this issue Feb 1, 2024

CakePHP 5? arodu/cakelte#71

Closed

ibakirov mentioned this issue Mar 4, 2024

ADMINLTE PRO with Bootstrap 5 #5517

Closed

dfsmania mentioned this issue May 7, 2024

[FEATURE] When update to Bootstrap 5 please.... jeroennoten/Laravel-AdminLTE#1278

Closed

danny007in mentioned this issue May 18, 2024

AdminLTE with Bootstrap 5.3 #5511

Open

[RELEASE] AdminLTE v4 beta1 #3692

[RELEASE] AdminLTE v4 beta1 #3692

Comments

danny007in commented May 13, 2021 • edited Loading

This comment has been minimized.

This comment was marked as outdated.

This comment has been minimized.

tacman commented May 16, 2021 • edited by danny007in Loading

Root3287 commented May 16, 2021

danny007in commented May 16, 2021

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

MGatner commented Jun 23, 2021

REJack commented Jun 23, 2021

tacman commented Jun 23, 2021

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as outdated.

MGatner commented Jun 24, 2021

This comment was marked as outdated.

sitchi commented Nov 1, 2023

umer936 commented Nov 1, 2023

bhojkamal commented Dec 13, 2023

danny007in commented Dec 22, 2023

carry0987 commented Jan 15, 2024

FaizullahFirozi commented Jan 24, 2024

MikhaelMounay commented Feb 21, 2024

SharkMachine commented Feb 23, 2024

Kroesss commented Feb 24, 2024

muhanadali100 commented Mar 19, 2024

jameslao commented Mar 31, 2024

jameslao commented Mar 31, 2024

DPComp commented Apr 14, 2024 • edited Loading

danny007in commented May 15, 2024

carry0987 commented May 15, 2024

danny007in commented May 29, 2024

juniwalk commented May 29, 2024

carry0987 commented May 29, 2024 • edited Loading

E-zh commented Jun 17, 2024

wizhippo commented Jun 17, 2024 • edited Loading

E-zh commented Jun 17, 2024 • edited Loading

wizhippo commented Jun 18, 2024

E-zh commented Jun 19, 2024 • edited Loading

E-zh commented Jun 19, 2024

wizhippo commented Jun 19, 2024

E-zh commented Jul 1, 2024

danny007in commented May 13, 2021 •

edited

Loading

tacman commented May 16, 2021 •

edited by danny007in

Loading

DPComp commented Apr 14, 2024 •

edited

Loading

carry0987 commented May 29, 2024 •

edited

Loading

wizhippo commented Jun 17, 2024 •

edited

Loading

E-zh commented Jun 17, 2024 •

edited

Loading

E-zh commented Jun 19, 2024 •

edited

Loading