Cannot use any component even layout


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.


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
  • 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