Developing web apps is hard. There are so many things to think about. Way, way, waaay too many. It’s easy to get caught up in the details and forget one important little thing: How will users know how to use your app once it’s done? The simplest way is to add a little tour-guide component that pops up and explains each step. Except those are kind of difficult to implement yourself. Thankfully, if you’re using Vue.js, vue-tour has you covered. It’s a super-simple library that makes writing tour guides about as simple as could be.
If you don’t have a project set up already, go ahead and start one using vue-cli 3.0 beta and the default options. $ vue create my-new-project
and hitting enter a couple times should be sufficient.
Then, you’ll want to install vue-tour
from npm:
Enable the plugin and load the CSS…
Now that all the formalities are out of the way, here’s a four-step guide as to how vue-tour
works.
target
property that is a CSS selector for the relevant element you modified above. Add a content
property next to target
that contains the text you want that step to have.<vue-tour name="whateverMyTourNameIs" :steps="mySteps"></vue-tour>
component somewhere in your app.this.$tours['whateverMyTourNameIs'].start()
in your mounted hook, or whenever you want the tour to start.Done! Was that a little fast for you? Here’s the guide again in code form:
Oh, and if you want to modify the popup template, you can do that too.
So do your users (and yourself!) a favor. Use vue-tour
to make clear the usage of the great and wonderful app you have conjured up.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!