Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDB Pro install help

Jazzman898 free asked 5 years ago


I purchased MDB Vue Pro and I'm having a really difficult time getting the components to display correctly. After downloading and running NPM I am able to see the demo content but the components do no display correctly if I use them in my actual app or if I copy some of the code samples from the help docs.

I've actually removed the demo content to start with a clean project but it seems I'm missing something, the only content that will display correctly is the Hello World component. For instance, if I copy the Parallax code example to the Hello World template it displays distorted. If I use one of the nav composition examples, it displays a blank page with the hamburger menu in the center of the page but no errors on the console.

So in addition to importing the components when creating a component, do I also have to import them into App.vue? It seems like I'm missing a step but I'm not sure what it is. For now, I just want to start with a base project like the link below:

https://mdbootstrap.com/previews/docs/latest/html/skins/cyan-skin.html

Thanks


Jakub Strebeyko staff answered 5 years ago


Hi there @Jazzman898,

At first I thought it might be something with CSS, but as I download the 5.1.0 package I see that's not the case. Could you perhaps share a screen cap of this distortion? Maybe it'd reveal the issue.

Focusing on the question about the missing step -- This is how it goes.

  1. download the package, unzip it, yarn / npm i the dependencies.
  2. run yarn demo / npm run demo to see the demo app, the examples of all the components out there.
  3. (optional) once you're ready for your own thing, run yarn remove-demo / npm run remove-demo to free up space
  4. run yarn start / npm run start to fire up a clean project, located in ./src.

I do not know about how familiar are you with ES6 module system or Vue Single File Components, but in general both the components' code and necessary styling are included, in the mdbvue dependency or the stylesheets imported in .src/main.js, respectively. In case you wonder what is really needed to run a mdbvueed project, here is a quickstart guide, in the bottom part of which, in the pro tab, you'll see how to bootstrap any app with our library.

You could start building directly in the ./src/App.vue - import components using, say

import { mdbParallax, mdbContainer, mdbMask, mdbRow, mdbCol } from 'mdbvue';

Vue instance's components declaration and appropriate markup. You could straight divide the app into components and write them up in the ./src/components directory to import them into the App.vue. You could, as well, start with the first option and then migrate into dedicated files, once the structure gets harder to maintain. The point is - the resources, usually the mdbvue components, are required to be imported just once - in place where they are used.

For the project shown, you will need a SideNav, a Navbar, a Footer and, as I assume it would be a SPA, a vue-router aided <router-view>. It means that mdbFooter component could be imported from {mdbvue} into a MyFooter component, customized there and then App.vue would be importing the customized MyFooter as part of layout.

We are using almost the same layout in our App (except for the SideNav). In case you remove-demoed, I suggest downloading the package again, running the demo and having a look into the ./demo folder - you could implement the said project with ease, building upon what is in the folder. May it serve you with it's richness of examples of mdb components usage. In case of further questions, please do not hesitate - use this support forum as your oyster.

For future reference, I also suggest including aids in form of code snippets / screenshots, which greatly shorten the debug/support time by helping to get to the problem's bottom faster, in a reliable manner.

With Best Regards,Kuba



Please insert min. 20 characters.

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: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 4.8.2
  • Device: Mac PC
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: Yes