Howto overwrite components globally

Topic: Howto "overwrite" components globally

Ehret priority asked 1 year ago

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

Add comment

Bartosz Cylwik staff answered 1 year ago

0 0 Best answer

Hi! I think beeing able to import your custom component directly from the <code>mdb-vue-ui-kit</code> can be problematic. You would have to download the whole package, run <code>npm pack</code> and then install the package from the new <code>tgz</code> file. The problem is that you would have to do it after every MDB update.

I think easier options would be to:

<ol>
<li>if you are using vite - define an alias for the component location inside <code>vite.config.js</code>: <a href="https://vitejs.dev/config/shared-options.html#define" target="_blank" rel="nofollow">https://vitejs.dev/config/shared-options.html#define</a></li>
<li>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:</li>
</ol>

For example:

<pre class="prettyprint"><code>{
 "compilerOptions": {
 "paths": {
 "my-mdb-vue-ui-kit-file": ["./location_of_the_file.vue"]
 }
 },
</code></pre>

Hope some of that helps! Best Regards!

Please insert min. 20 characters.

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!

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
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

Ehret

0Support score
2Questions 0Answers 1Snippets