How to integrate MDB5 Vue Advanced in Nuxt 3?

Topic: How to integrate MDB5 Vue Advanced in Nuxt 3?

peteritv pro premium priority asked 2 weeks ago

Hi there!

After successful installation of Nuxt3 + MDB5-Standard (following https://mdbootstrap.com/docs/vue/getting-started/nuxt/ and some tweaking in nuxt.config.ts and app.vue) I managed to get MDB5-Vue up and running in Nuxt v3.14. Now I would like to upgrade to MDB5-Vue-Advanced.

I can't just run npm install mdb-vue-ui-kit anymore. Any help will be greatly appreciated!

Peter

+++ EDIT +++

I fixed most issues by first downloading an unzipping the mdb package, copy the mdb and plugin folders to my Nuxt project, and copying all mdb-dependencies from package.json. Then run npm install.

There are some remaining hydration errors and sass warnings that I removed following:

https://medium.com/@natalia.afanaseva/how-to-migrateyour-vue-3-app-to-nuxt-3-c7a2e815568e

and

https://www.fparedes.com/blog/solve-js-api-deprecation-in-dart-sass-in-astro/

Now I have the drag & drop example up and running without any complaints from Nuxt :-)

Add comment

Bartosz Cylwik staff answered 2 weeks ago

0 0 Best answer

Hi! Im glad you were able to integrate the mdb-vue-ui-kit to the to the nuxt 3 app! If you want to use npm instead of the zip one you can follow steps from this tutorial and get an access token. With access token you can install the package via npm

https://mdbootstrap.com/docs/vue/pro/installation/#section-npm

As of the issues with hydration and deprecation you are seeing, I'll add this to our list to check and possibily update.

Best Regards!

Add comment