Build Beautiful Tutorials With Vue

Install & Download:

# NPM
$ npm i vue-tut --save

Description:

A vue.js component to quickly build your own code tutorials with ease.

Basic usage:

1. Import the component.

import VueTut from 'vue-tut';
import 'vue-tut/dist/vue-tut.min.css';

2. Import a theme of your choice into your project.

import 'vue-tut/dist/themes/vue.css';
import 'vue-tut/dist/code-themes/vue.css';

3. Register the component.

Vue.use(VueTut);

4. Create tutorials as follows:

<template>
  <tutorial>
    <div slot="eyebrow">
      VueTut Examples
    </div>
    <div slot="title">
      Example – All Slots
    </div>
    <div slot="intro">
      This example has all the slots filled out, unlike the first example which was minimal.
    </div>
    <tutorial-section>
      <div slot="name">
        Section One
      </div>
      <div slot="title">
        The First Section
      </div>
      <div slot="intro">
        This section has all the slots filled out.
      </div>
      <tutorial-step slot="step">
        <p>
          Add the HelloWorld component to <tt>App.vue</tt>.
        </p>
        <aside slot="aside">
          <tutorial-highlighter :text="hello1" :highlight-lines="[4, 14]" title="App.vue" />
        </aside>
      </tutorial-step>
      <tutorial-step slot="step">
        <p>
          Add font styles.
        </p>
        <aside slot="aside">
          <tutorial-highlighter :text="hello2" :highlight-lines="[/font/]" title="App.vue" />
        </aside>
      </tutorial-step>
    </tutorial-section>
    <tutorial-section>
      <div slot="name">
        Section Two
      </div>
      <div slot="title">
        The Second Section
      </div>
      <div slot="intro">
        This section <strong>also</strong> has all the slots filled out.
      </div>
      <tutorial-step slot="step">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <aside slot="aside">
          <img src="./assets/logo.png" width="200" height="auto">
        </aside>
      </tutorial-step>
      <tutorial-step slot="step">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <aside slot="aside">
          <img src="./assets/logo.png" width="200" height="auto" style="filter: hue-rotate(45deg);">
        </aside>
      </tutorial-step>
      <tutorial-step slot="step">
        <p>
          Put anything in the aside you want: images, movies, embeds.
        </p>
        <aside slot="aside">
          <iframe
            src="https://player.vimeo.com/video/247494684?dnt=1"
            style="width: 100%; height: 100%; min-height: 320px;"
            frameborder="0"
            webkitallowfullscreen
            mozallowfullscreen allowfullscreen />
        </aside>
      </tutorial-step>
    </tutorial-section>
  </tutorial>
</template>

Preview: