[RELEASE] AdminLTE v4 beta2 #3692

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

(Beta)-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

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

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 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

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

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

[RELEASE] AdminLTE v4 beta2 #3692

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

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

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 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