loading...
Cover image for Creating a feature tour like that of hey.com

Creating a feature tour like that of hey.com

kp profile image KP ・1 min read

I'm trying to recreate a simple version of the Hey.com feature tour using Nuxt.js (or Vue.js), as you can see here.

I'm sure there are examples (perhaps even repos) of this out there in either nuxt.js or vue. If you have a tip on how to do this, please leave a comment below!

Discussion

markdown guide
 

I am a bit confused about what you want to do; I looked at the site and it is just a carousel of pre-recorded videos that play automatically.

Am I missing something?

 

@eruizdechavez it is indeed a carousel, but

  • the page URLs change with every new slide shown, with a nice fade-in animation
  • there are left and right arrow icons fixed on the screen.

This is basically what I'm trying to replicate, but with nuxt.js / vue.

 

Those URL changes are done with a standard JS API called History API.

developer.mozilla.org/en-US/docs/W...

In vue/nuxt terms looks like you need to look at the router, at the very least that should point you in the right direction.

router.vuejs.org/guide/essentials/...
nuxtjs.org/api/configuration-router/

Everything else you mentioned are either CSS layout or transitions.

Understood and thanks for the context. I was hoping for an example of this in action.