[RELEASE] AdminLTE v4 beta3 #3692

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

(Beta)-Release is online, you can install it with npm install admin-lte@latest 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

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);
        }
    }
}

ajiho · 2024-07-09T06:54:06Z

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.

That's right. Bootstrap 6 may arrive, but it will take a long time，This is an open source project, and if we want Adminlte to keep up with Bootstrap, I think we should need more people to participate and contribute. If we just keep asking, I don't think there will be much progress

ajiho · 2024-07-09T06:58:41Z

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

Same as AdminLTE v3

Regarding this point, for Composer users, it seems that they can only obtain the source code because I observed that adminlte ignored the dist directory . Composer is different from NPM. When NPM releases, it can only publish the dist directory, while Composer seems to only download the content of the tag tag, so it can only obtain the source code? What do you think about this? If you don't want to break the status quo, you may need to explain this in the document

carry0987 · 2024-07-09T09:17:49Z

That's right. Bootstrap 6 may arrive, but it will take a long time，This is an open source project, and if we want Adminlte to keep up with Bootstrap, I think we should need more people to participate and contribute. If we just keep asking, I don't think there will be much progress

This is the best reply I've seen. The spirit of collaboration is indeed the most important aspect of open-source projects.

danny007in · 2024-09-01T15:40:46Z

Just Released adminlte-4.0.0-beta2

danny007in · 2024-09-02T11:40:28Z

in next release i have decided to release compiled dist folder also any suggestions

dereuromark · 2024-09-02T12:13:30Z

Is there any chance that layout-navbar-fixed and a fixed top navbar remains?
Coming from v3 this seems to be lost now.

danny007in · 2024-09-02T20:59:43Z

Is there any chance that layout-navbar-fixed and a fixed top navbar remains? Coming from v3 this seems to be lost now.

#5681 (comment)

semanticfire · 2024-09-09T13:40:25Z

First, delighted to see this moving!

I've started migrating one of my projects to 4.0.0-beta2 today, and I'm happy so far, good job!

I use my own theme colors and after some tweaking and updating I got this (#2687) method working on the new build system.
The documentation needs an update. This seems related to one of the tasks of #4885, how can I help with that?

ErikThiart · 2024-10-03T07:49:32Z

First, delighted to see this moving!

I've started migrating one of my projects to 4.0.0-beta2 today, and I'm happy so far, good job!

I use my own theme colors and after some tweaking and updating I got this (#2687) method working on the new build system. The documentation needs an update. This seems related to one of the tasks of #4885, how can I help with that?

Is there a CDN available?

henry5059 · 2024-11-13T12:31:00Z

Hello, I am working with AdminLte 4.0.0-beta2 in vuejs 3.5. But I have a problem when loading the Adminlte scripts, since the sidebar toggle does not work, for example. Can you explain to me if I'm doing something wrong or what?

This would be the reference source code.
`import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
import 'admin-lte/dist/css/adminlte.min.css';

import 'bootstrap'
import 'admin-lte'

That is when installing the package: npm i admin-lte

`

danny007in · 2024-12-08T02:39:33Z

In AdminLTE v4 Beta 3, we plan to include the compiled dist folder based on valuable feedback received. Do you have any suggestions?

burdittw · 2024-12-08T05:22:39Z

I am hoping that once it is out, in an easily usable format that people feel comfortable using then we can start getting some good feedback. But to be honest I feel like a lot of the base for this template have moved on due to how long it has taken to come out. I hope I am wrong but based on the comments over the last few years I think it has lost some people. I hope we can bring them back, but time will tell. The hard part with anything technical is that it all moves so fast, and even more so now these days. This project needs more contributors to keep it moving at the speed of technology.

Can't wait for some of the releases to be put out and start seeing some feedback from users. It has been a while since I brought any changes into my project using it as I added custom code to handle things I specifically needed and will have to go back and try and remember what all that was. Don't look forward to that and really don't have time to do it as I have to get the product release in a few months.

henry5059 · 2024-12-08T15:06:30Z

In AdminLTE v4 Beta 3, we plan to include the compiled dist folder based on valuable feedback received. Do you have any suggestions?

Not at the moment. But thank you very much.

henry5059 · 2024-12-08T15:06:58Z

I am hoping that once it is out, in an easily usable format that people feel comfortable using then we can start getting some good feedback. But to be honest I feel like a lot of the base for this template have moved on due to how long it has taken to come out. I hope I am wrong but based on the comments over the last few years I think it has lost some people. I hope we can bring them back, but time will tell. The hard part with anything technical is that it all moves so fast, and even more so now these days. This project needs more contributors to keep it moving at the speed of technology.

Can't wait for some of the releases to be put out and start seeing some feedback from users. It has been a while since I brought any changes into my project using it as I added custom code to handle things I specifically needed and will have to go back and try and remember what all that was. Don't look forward to that and really don't have time to do it as I have to get the product release in a few months.

Ok. Thank you verymuch.

danny007in · 2024-12-24T08:38:35Z

In AdminLTE v4 Beta 3, we plan to include the compiled dist folder based on valuable feedback received. Do you have any suggestions?

Release Please Test and Give Feedback

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

danny007in mentioned this issue May 18, 2024

AdminLTE with Bootstrap 5.3 #5511

Open

danny007in mentioned this issue Aug 24, 2024

Big css size #5651

Closed

danny007in changed the title ~~[RELEASE] AdminLTE v4 beta1~~ [RELEASE] AdminLTE v4 beta2 Sep 1, 2024

danny007in changed the title ~~[RELEASE] AdminLTE v4 beta2~~ [RELEASE] AdminLTE v4 beta3 Dec 8, 2024

[RELEASE] AdminLTE v4 beta3 #3692

[RELEASE] AdminLTE v4 beta3 #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.

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

ajiho commented Jul 9, 2024

ajiho commented Jul 9, 2024

carry0987 commented Jul 9, 2024

danny007in commented Sep 1, 2024

danny007in commented Sep 2, 2024

dereuromark commented Sep 2, 2024

danny007in commented Sep 2, 2024

semanticfire commented Sep 9, 2024

ErikThiart commented Oct 3, 2024

henry5059 commented Nov 13, 2024

danny007in commented Dec 8, 2024

burdittw commented Dec 8, 2024 • edited Loading

henry5059 commented Dec 8, 2024

henry5059 commented Dec 8, 2024

danny007in commented Dec 24, 2024

danny007in commented May 13, 2021 •

edited

Loading

tacman commented May 16, 2021 •

edited by danny007in

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

burdittw commented Dec 8, 2024 •

edited

Loading