Vue 3 Component - Bootstrap 5 styling with Responsive Extension not working as expected.
Vue 3 Component - Bootstrap 5 styling with Responsive Extension not working as expected.
![eson0519](https://secure.gravatar.com/avatar/5d10ec6975ba51f8f562f7ab28725736/?default=https%3A%2F%2Fvanillicon.com%2F5d10ec6975ba51f8f562f7ab28725736_200.png&rating=g&size=120)
Hi, I'm new here in this forum, but using this DataTables since 2018 as far as I remember. Is the responsive extension for the vue 3 component supposed to work with the bootstrap 5 styling? Based on this forked stackblitz, the bootstrap classes are being removed by the responsive extension, and the structure is also modified by the extension: https://stackblitz.com/edit/datatables-net-vue3-bootstrap5-rffyfz?file=src%2FApp.vue
Does anybody experienced this and found a solution?
Thank you.
This question has an accepted answers - jump to answer
Answers
Your packages were out of date. Updating to DataTables 2, and v3 for the DataTables/Vue integration helped.
I've also got the import as:
which would allow the use of a Bootstrap modal if you wanted to use that, rather than the child row for the details view.
Finally the Responsive import was updated to be
datatables.net-responsive-bs5
rather than without the-bs5
. Same for the styling.The updated example is here.
Allan
Hi Allan, thanks for the response. I've replicated the example on another Stackblitz fork and was able to do it so. But when I try to use it within the project that I'm currently working on, an error shows (as shown on the screenshot). Any recommendations regarding this?
@allan apologies for the separate comment. It seems that when I use the import
import 'datatables.net-responsive-bs5'
this generates the error:
TypeError: Cannot read properties of undefined (reading 'display')
Any idea of what's causing this? Thanks.
Are you importing Responsive 3.0.1, or an older version?
Allan
Hi Allan,
im latching onto this question
I hope thats okay.
I'm getting the same error. The error started occuring after an upgrade from responsive-dt@3.0.0 to responsive-dt@3.0.2.
I have made a demo on stackblitz, but the problem does not exist there / everything works fine. Ive gone through the changes on github between the versions and I could not find anything suspicious. What Info could I provide you with to maybe help me understand why this problem occurs?
Additionally after the upgrade, in a different vue component im getting an alert saying "Uknown feature: buttons". Problem did not exist before the update ( from buttons 3.0.0 to 3.0.2 ).
Thank you in advance!
Difficult to debug it if it working in StackBltiz
.
The error suggests that Responsive hasn't been imported. What happens if you try:
The Buttons error suggests that you are using Buttons in your
layout
, but have not imported Buttons.Allan
I've tried your suggestion, but it unfortunately is also not working.
import DataTableVue from "datatables.net-vue3";
import DataTablesCore from "datatables.net-bs5"
import 'datatables.net-datetime'
import 'datatables.net-responsive';
import 'datatables.net-responsive-bs5';
Whats really annoying is that there were no changes done to the code other than the upgrade. Which means, responsive worked aswell as buttons.
I'm assuming now that laravel mix is bundling files in the wrong way and will work in that direction. When that also fails, I'll just revert to 3.0.0 version of responsive and buttons.
Thank you for your help.
Best regards
Solved! I had a faulty yarn.lock file. Which somehow prevented laravel.mix to use the dependencies properly.
In the end I only had to remove the yarn.lock and reinstall the dependencies....
So sorry for taking your time Allan but I do hope this saves someone else their time.
Best regards
Ah! Thanks for posting back. Good to hear you got to the bottom of it.
Allan