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.
- download the package, unzip it,
yarn
/npm i
the dependencies. - run
yarn demo
/npm run demo
to see the demo app, the examples of all the components out there. - (optional) once you're ready for your own thing, run
yarn remove-demo
/npm run remove-demo
to free up space - 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 mdbvue
ed 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-demo
ed, 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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