Collapse not showing up

[andela-oadebayo]

Bellow is a screen shot of my code

But in my console i get this error

Failed to mount component: template or render function not defined
found in
---> <Collapse>
       <CreatePatient> at resources/assets/js/components/reception/patient/CreatePatient.vue
         <Root>

Please help, i have being blocked on this for days. Thank you

[OgaBoss]

Check this out, to solve the issue i had if you come across it https://github.com/OgaBoss/collapse

[holic-cl]

That link is not working.

Can you post what was the solution?.

[OgaBoss]

i changed

exports.Collapse = require('./Collapse') exports.Item = require('./Item')

in src/index.js to

import Collapse from './Collapse' import Item from './Item'

export { Collapse, Item } @holic-cl

[holic-cl]

@OgaBoss thanks for fast answer, but didn't work here (mine is another problem anyway).

[OgaBoss]

what error are you getting @holic-cl

[holic-cl]

Not getting error, collapse items are showing on vue-tools but i don't know why i can't see it. #9

[albertoantunes]

@OgaBoss solution didn't work as-is in my case. I needed to just add the .vue extension at the end and then it worked!

import Collapse from './Collapse.vue'
import Item from './Item.vue'

export {
Collapse,
Item
}

[albertoantunes]

turns out my webpack.config was not configured to recognize .vue extensions. After i added extensions property in my resolve config, it worked as is, without the need to add .vue extension!

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'], //THIS LINE

[SilverFoxA]

Faced the same issue, here's the solution, add class="show" to your top level collapse element.

<collapse accordion is-fullwidth class="show">
...
</collapse>

[Zikoi5]

components: {
   Collapse: Collapse.default,
   CollapseItem: CollapseItem.default,
 }