vue-bulma / collapse

Collapse component for Vue Bulma
MIT License
23 stars 13 forks source link

Collapse not showing up #10

Open andela-oadebayo opened 6 years ago

andela-oadebayo commented 6 years ago

Bellow is a screen shot of my code

screen shot 2017-07-26 at 11 22 58 pm

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 commented 6 years ago

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

holic-cl commented 6 years ago

That link is not working.

Can you post what was the solution?.

OgaBoss commented 6 years ago

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 commented 6 years ago

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

OgaBoss commented 6 years ago

what error are you getting @holic-cl

holic-cl commented 6 years ago

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

albertoantunes commented 6 years ago

@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 commented 6 years ago

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 commented 5 years ago

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 commented 3 years ago

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