Monaca Onsen UI Discord Chat Github Repo

Create a Walkthrough Page using Onsen and vue



  • @misterjunio Thank you for your suggestion. I am implementing the library you suggested. In my AppNavigator I added the created hook, but how can I set the component I want to load first? Will I set it on the localstorage?



  • @misterjunio Rather my question is how will I call the component I want in localstorage-vue?


  • Onsen UI

    @Jearson-Batanes-Gomez if I understood what you want correctly you should be able to simply store a boolean hasDoneWalkthrough in the localstorage. Then you check it in the created hook and, if it’s false, you set this.pageStack = [Walkthrough], otherwise this.pageStack = [AppSplitter]. This will put the page you want at the top of the page stack and therefore on the screen.



  • @misterjunio Thanks for the insight I already implemented it. But I cannot dismiss the walkthough when i click the done method on the Walkthrough.vue. I used this:

    AppNavigator.vue

     <v-ons-navigator :page-stack="pageStack" @push-page="pageStack.push($event)" :options="options">
    
    	<component 
    		v-for="page in pageStack"
    		:is="page" 
    		:key="page" 
    		:page-stack="pageStack"
    		:set-options="setOptions">
    	</component>
    	
    </v-ons-navigator>
    

    Walkthrough.vue

    <v-ons-button @click="done">Start Using App</v-ons-button>
    
    <script>	
    import AppSplitter from '../AppSplitter.vue';
    
    export default {
    	data() {
    		return {
    			
    		}
    	}, 
    	methods: {
    
    		done(){
    			this.$emit('push-page', AppSplitter);
    		}
    	}
    }
    </script>

  • Onsen UI

    @Jearson-Batanes-Gomez since it will always be the AppSplitter where you want to go to, instead of pushing it you can throw another custom event from the Walkthrough and then reset the page stack manually in the AppNavigator. So in your done() method you could do something like this.$emit('walkthrough-done'); and get it in the navigator like @walkthrough-done="pageStack = [AppSplitter]".



  • @misterjunio It’s not working on my case. I tried to do your suggestion.

    <v-ons-navigator :page-stack="pageStack" @walkthrough-done="pageStack = [AppSplitter]" :options="options">
    
    	<component 
    		v-for="page in pageStack"
    		:is="page" 
    		:key="page" 
    		:page-stack="pageStack"
    		:set-options="setOptions">
    	</component>
    	
    </v-ons-navigator>
    

    Walkthrough done method

    done(){
        // Vue.localStorage.remove('hasDoneWalkthrough');
    
       Vue.localStorage.set('hasDoneWalkthrough', true);
    
       this.$emit('walkthrough-done');
    
    }

  • Onsen UI

    @Jearson-Batanes-Gomez You are setting the listener in <v-ons-navigator> but firing the event in <comopnent :is="walkthrough">. Try moving the listener there. Otherwise, read the third page of VOnsNavigator tutorial and see how to manage the navigator using only events without children.



  • @Fran-Diox thanks for the response. Yes, I already implemented the link you had given earlier but it is not working on my case. That’s why i followed the suggestion of
    @misterjunio to assign pageStack to [AppSplitter] at the v-ons-navigator. What do you mean here :is=“walkthrough” ? I will assign the emitted value on the component?

    <component :is="walkthrough-done"

  • Onsen UI

    @Jearson-Batanes-Gomez said:

    <v-ons-navigator :page-stack="pageStack" @walkthrough-done="pageStack = [AppSplitter]" :options="options">
    
      <component 
        v-for="page in pageStack"
        :is="page" 
        :key="page" 
        :page-stack="pageStack"
        :set-options="setOptions">
      </component>
    
    </v-ons-navigator>
    

    I think you want to do something like this:

    <v-ons-navigator :page-stack="pageStack" :options="options">
    
        <component 
            @walkthrough-done="pageStack = [AppSplitter]"
            v-for="page in pageStack"
            :is="page" 
            :key="page" 
            :page-stack="pageStack"
            :set-options="setOptions">
        </component>
        
    </v-ons-navigator>
    

    This could also work (from vue-onsenui@2.1.0):

    <v-ons-navigator
      :page-stack="pageStack"
      :options="options"
      @walkthrough-done="pageStack = [AppSplitter]"
      @set-options="options = $event"
      @push="pageStack.push($event)"
    >
    </v-ons-navigator>
    

    The difference is that instead of calling this.pageStack.push(page), you’d need to do this.$emit('push', page);. This is, however, not directly related to your issue so you can just continue using the <component v-for...> syntax.



  • @Fran-Diox thanks my friend. I used your first method but I am getting not defined on the instance but reference during render. That is why I declare a new property newPageStack.

     data(){
      return {
        pageStack: [AppSplitter],
        newPageStack: [AppSplitter],
        options: {}
      };
    },
    
    <component
      @walkthrough-done="pageStack = newPageStack"
      v-for="page in pageStack"
      :is="page" 
      :key="page" 
      :page-stack="pageStack"
      :set-options="setOptions">
     </component>


  • @Fran-Diox I just notice something the transition from the last page of walkthrough to the AppSpliter.vue is not smooth. I can see the first page of walkthrough.vue before seeing the AppSplitter.vue. Why is this? Is there something I can improve on?