Monaca Onsen UI Discord Chat Github Repo

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