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

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

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

}

@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 Rather my question is how will I call the component I want in localstorage-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?

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>