Topic: Howto "overwrite" components globally
Is there an art of the state way to customize mdb components globally?
If I want e.g. customize MDBNavbarToggler ? What is working is: Copy MDBNavbarToggler.vue to components/MDB/Navbar/MDBNavbarToggler.vue and import it from there:
import MDBNavbarToggler from '../components/MDB/Navbar/MDBNavbarToggler.vue';
But is there a way that I do not have to take care from where I want to import it? I mean that I can stay at
import MDBNavbarToggler from 'mdb-vue-ui-kit';
but my customized version is used?
Thank you
Christian
Hi! I think beeing able to import your custom component directly from the mdb-vue-ui-kit can be problematic. You would have to download the whole package, run npm pack and then install the package from the new tgz file. The problem is that you would have to do it after every MDB update.
I think easier options would be to:
- if you are using vite - define an alias for the component location inside
vite.config.js: https://vitejs.dev/config/shared-options.html#define - if you are using typescript - create a file that would keep your components and then inside tsconfig define a path and name for that file:
For example:
{
"compilerOptions": {
"paths": {
"my-mdb-vue-ui-kit-file": ["./location_of_the_file.vue"]
}
},
Hope some of that helps! Best Regards!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: MDB5 4.1.1
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: No