Failed to mount component: template or render function not defined

[tungnk1993]

Sorry I've read the other closed issues, but I still can't figure it out

App.vue

<template>
  <div id="app">
      <toggle-button :value="false" color="#82C7EB" :sync="true" :labels="true"/>
    </div>
</template>

<script>
import ToggleButton from 'vue-js-toggle-button'

export default {
    name: 'app',
    components: {
        ToggleButton
    }
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton);

new Vue({
  el: '#app',
  render: h => h(App)
})

Have tried several variations but none of them seem to be working. Appreciate if you could help give me a basic sample. I'm very new to VueJS

[bmbmjmdm]

I'm having the same exact problem...

[euvl]

You do not need to define ToggleButton component,

{ ToggleButton }

Plugin does it for you.

After useing plugin you can just do:

<template>
  <div id="app">
      <toggle-button :value="false" color="#82C7EB" :sync="true" :labels="true"/>
    </div>
</template>

<script>
export default {
    name: 'app'
}
</script>

[euvl]

It kind of defines it globally. And when you try to import it, you actually import a plugin, not a component. This way you replace global definition of ToggleButton: ToggleButtonComponent with ToggleButton: ToggleButtonPlugin. And then vue tries to render plugin and obviously fails.

[bmbmjmdm]

This fixes it, thank you!