VueTut - Easily build beautiful tutorials with Vue

For those component/plugin authors out there, here’s a component to help you create beautiful tutorials similar to the SwiftUI tutorials.

Check out the demo to see what I’m talking about.

VueTut lets you display code (or other content) on the right side while the user scrolls through the tutorial steps on the left. On mobile, it collapses down to a nice single scrolling experience. Works great on tablets too!

It works really well for code tutorials because if you’ve ever tried to write one you’ll know there’s a tension between including all the code up front vs sharing it in small chunks. But often those small chunks of code need to be scattered through the file, so you need to include the whole file again in every step of your tutorial. Using VueTut, when you’re telling your users to add code to a file, you can show it to them in context with the rest of the file, instead of saying in your tutorial “insert this text at line 5” etc etc.

I hope it’s helpful for those documenting their projects! Share that knowledge!

Looks like a really cool project!

The tutorial works well, but I don’t understand the docs:

Can you check if they are broken?

Hi Dave, thanks for the kind words!

Those docs were really rough, just screenshots of components really.

I’ve updated them now, check them out here, they should be more clear: https://evwt.github.io/vue-tut

Looks great!

Best of luck with it, I think it’s a great addition to the ecosystem :smiley:

1 Like