Create a Walkthrough Page using Onsen and vue

[Jearson Batanes Gomez]

I have read this topic https://community.onsen.io/topic/246/walktrough/10 , however I cannot figure it out how to implement it on vue component. Can someone please help me implement this. What I want is that when i click on the start using app, the page will return to the AppNavigator.vue. Here is my code.

//index.js
import CustomToolbar from './partials/CustomToolbar.vue';
import AppNavigator from './AppNavigator.vue';

import WalkThrough from './pages/WalkThrough.vue';


Vue.use(VueOnsen);
Vue.component('custom-toolbar', CustomToolbar);

const app = new Vue({

   el: '#app', 

   render: h => h(AppNavigator)
});

//AppNavigator.vue

   <template>
   <v-ons-navigator :page-stack="pageStack" :options="options">
           <component 
		v-for="page in pageStack"
		:is="page" 
		:key="page" 
		:page-stack="pageStack"
		:set-options="setOptions">
	</component>
	
</v-ons-navigator>
</template>


<script>

    import AppSplitter from './AppSplitter.vue';
    import WalkThrough from './pages/WalkThrough.vue';


    export default {

	    data(){
		    return {
			    pageStack: [AppSplitter],
			    options: {}
		    };
	    },
	    methods: {
		    setOptions(newOptions) {
			    this.options = newOptions;
		    }
	     }
    }
</script>

// Walkthrough.vue

<template>
<v-ons-page>
	<v-ons-carousel fullscreen swipeable auto-scroll overscrollable 
		:index.sync="carouselIndex"
	>
		<v-ons-carousel-item>
			<section class="hero is-primary">
				<div class="hero-body">
					<div class="container has-text-centered">
						
						<img class=".walkthrough-image-1" src="../assets/accounting-image.png">
						
	
						<a class="button is-primary">Continue</a>
					</div>
				</div>
			</section>

		</v-ons-carousel-item>

		<v-ons-carousel-item>
       		<section class="hero is-success">
				<div class="hero-body">
					<div class="container has-text-centered">
						
						<img class="walkthrough-image-2" src="../assets/accounting-review.png">
						
		
						<a class="button is-primary">Start Using App</a>
					</div>
				</div>
			</section>
    	</v-ons-carousel-item>

	</v-ons-carousel>
</v-ons-page>
</template>

[misterjunio]

@Jearson-Batanes-Gomez what I would do is use something like the localstorage for Vue plugin as in the topic you mentioned to permanently save whether the user has been through the walkthrough or not. Then in your AppNavigator I would use the created hook to check the localstorage and decide between Walkthrough and AppSplitter for the initial page in the pageStack.

[Jearson Batanes Gomez]

@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?

[Jearson Batanes Gomez]

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

[misterjunio]

@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.

[Jearson Batanes Gomez]

@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>

[misterjunio]

@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]".

[Jearson Batanes Gomez]

@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');

}

[Fran Diox]

@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.

[Jearson Batanes Gomez]

@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"

[Fran Diox]

@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.

[Jearson Batanes Gomez]

@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>

[Jearson Batanes Gomez]

@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?