Topic: Cannot use any component even layout
Abdellah Ramadan asked 6 years ago
Expected behavior: I tried implementing the Grid to see the output
Actual behavior: Nothing works. Only the carousel works and button styles. The rest such as components does. I setup the project correctly. Since yesterday I have been reading the docs.
Resources (screenshots, code snippets etc.):
<template>
<mdb-container>
<mdb-row>
<mdb-col md="6">
<h1>A hosting platform like no other</h1>
</mdb-col>
<mdb-col md="6">
<p>
Our powerful, bespoke hosting platform has been designed to
give you the best experience. We provide you with unbeatable
load balanced cloud hosting, meaning there's no single point
of failure and your website performance will never be affected
by other user's websites, visitors or activity. all servers have
SSD storage as standard, and we've optimised every part of your
experience for minimum speed and security. Our hosting is designed
to scale as your website grows, meaning the same great performance
no matter how popular you get.
</p>
</mdb-col>
</mdb-row>
</mdb-container>
</template>
Magdalena Dembna staff premium answered 6 years ago
Hi, While using imported components in Vue we must remember to import them and specify which ones are we going to use in the components object. Below I post your code with necessary content between tags. Kind regards, Magdalena
<template>
<mdb-container>
<mdb-row>
<mdb-col md="6">
<h1>A hosting platform like no other</h1>
</mdb-col>
<mdb-col md="6">
<p>
Our powerful, bespoke hosting platform has been designed to
give you the best experience. We provide you with unbeatable
load balanced cloud hosting, meaning there's no single point
of failure and your website performance will never be affected
by other user's websites, visitors or activity. all servers have
SSD storage as standard, and we've optimised every part of your
experience for minimum speed and security. Our hosting is designed
to scale as your website grows, meaning the same great performance
no matter how popular you get.
</p>
</mdb-col>
</mdb-row>
</mdb-container>
</template>
<script>
import { mdbContainer, mdbRow, mdbCol } from 'mdbvue';
export default {
name: "test",
components: {
mdbContainer,
mdbRow,
mdbCol
}
}
</script>
Abdellah Ramadan commented 6 years ago
Hi @Magdalena Dembna thank you very much. I spent almost half day yesterday and some hours 2 days ago. Kindly point to me where to the components because I searched on the docs. Best regards. Abdellah.
Magdalena Dembna staff premium answered 6 years ago
As you're searching through our documentation you may notice that for almost every component the code snippet is divided into several tabs. While in the template tab we use components such as , in the script tab we use the same name, but written in the camel case convention - so would be represented as mdbContainer.
Magdalena Dembna staff premium answered 6 years ago
For the example you posted before, including tags from the above snippet should be enough. If you wish to use any MDB component all you have to do is to include it in the import statement (as in the code snippet) and list it in the export -> components. If you're still having difficulties, please share all of the code from your component file, including and tags.
Kind regards, Magdalena
Abdellah Ramadan commented 6 years ago
Hello @Magdalena Dembna thank you. I was asking that how can one know the name of the component to he is trying to use. Like the mdbContainer, I have not seen in the doc pointing it as the name of the component I am trying to use. Thank you for the help. It solved my problem.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.1.1
- Device: Computer
- Browser: Vivaldi, Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No