Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Help with transition in vue-onsenui-kitchensink

  • Hi all,
    I’m adapting the example of transition to include a custom component into the template.
    Here my code

          <v-ons-list-item v-for="plugin in getPluginsList" :key="plugin.uuid"
            @click="transition('default', plugin)"
            {{ plugin.pluginName }}
        <v-ons-fab position="bottom right" :style="spdStyle">
            <v-ons-icon  style="color: green;" icon="md-add_circle"></v-ons-icon>
    import Plugin from './Plugin.vue'
    const transitionPage = {
      template: `
          <custom-toolbar backLabel="Plugins">
            {{ plugin.pluginName }}
    export default {
      props: ['pageStack', 'setOptions'],
      components: {
        'plugin-component': Plugin
      data () {
        return {}
      computed: {
        getPluginsList: function () {
          return this.$store.state.pluginsList
      methods: {
        transition (name, item) {
            animation: name,
            plugin: item,
            callback: () => this.setOptions({})
            extends: transitionPage,
            data () {
              return {
                animation: name,
                plugin: item

    But <plugin-component> is not showed, only the <custom-toolbar>.

  • No reply?

  • Onsen UI

    It’s a bit hard to figure out what exactly might be causing your issue without being able to see the app itself. Could you reproduce the issue on and share a Codepen here?

  • It’s quite difficult because it’s part of a more complex application.
    Anyway the source code is hosted here