Easily build beautiful tutorials with Vue

Overview

VueTut

Easily build beautiful tutorials with Vue.

📒 Docs
🖥 Tutorial/Demo

Join the chat at https://gitter.im/vue-tut/community

Install

npm i vue-tut

Setup

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

// Select a tutorial theme
import 'vue-tut/dist/themes/vue.css';

// Select a code highlighting theme
import 'vue-tut/dist/code-themes/vue.css';

Vue.use(VueTut);

Themes

Tutorial

vue or azure

Highlighting

prism-themes themes
a11y-dark / atom-dark / base16-ateliersulphurpool.light / cb / darcula / dracula / duotone-dark / duotone-earth / duotone-forest / duotone-light / duotone-sea / duotone-space / ghcolors / hopscotch / material-dark / material-light / material-oceanic / nord / pojoaque / shades-of-purple / synthwave84 / vs / vsc-dark-plus / xonokai

Official themes
coy / dark / funky / okaidia / prism / solarizedlight / tomorrow / twilight

vue-tut themes
vue

Languages

abap / abnf / actionscript / ada / agda / al / antlr4 / apacheconf / apl / applescript / aql / arduino / arff / asciidoc / asm6502 / aspnet / autohotkey / autoit / bash / basic / batch / bbcode / bison / bnf / brainfuck / brightscript / bro / bsl / c / cil / clike / clojure / cmake / coffeescript / concurnas / core / cpp / crystal / csharp / csp / css-extras / css / cypher / d / dart / dax / dhall / diff / django / dns-zone-file / docker / ebnf / editorconfig / eiffel / ejs / elixir / elm / erb / erlang / etlua / excel-formula / factor / firestore-security-rules / flow / fortran / fsharp / ftl / gcode / gdscript / gedcom / gherkin / git / glsl / gml / go / graphql / groovy / haml / handlebars / haskell / haxe / hcl / hlsl / hpkp / hsts / http / ichigojam / icon / iecst / ignore / inform7 / ini / io / j / java / javadoc / javadoclike / javascript / javastacktrace / jolie / jq / js-extras / js-templates / jsdoc / json / json5 / jsonp / jsstacktrace / jsx / julia / keyman / kotlin / latex / latte / less / lilypond / liquid / lisp / livescript / llvm / lolcode / lua / makefile / markdown / markup-templating / markup / matlab / mel / mizar / mongodb / monkey / moonscript / n1ql / n4js / nand2tetris-hdl / naniscript / nasm / neon / nginx / nim / nix / nsis / objectivec / ocaml / opencl / oz / parigp / parser / pascal / pascaligo / pcaxis / peoplecode / perl / php-extras / php / phpdoc / plsql / powerquery / powershell / processing / prolog / properties / protobuf / pug / puppet / pure / purebasic / python / q / qml / qore / r / racket / reason / regex / renpy / rest / rip / roboconf / robotframework / ruby / rust / sas / sass / scala / scheme / scss / shell-session / smali / smalltalk / smarty / solidity / solution-file / soy / sparql / splunk-spl / sqf / sql / stan / stylus / swift / t4-cs / t4-templating / t4-vb / tap / tcl / textile / toml / tsx / tt2 / turtle / twig / typescript / typoscript / unrealscript / vala / vbnet / velocity / verilog / vhdl / vim / visual-basic / vue / warpscript / wasm / wiki / xeora / xml-doc / xojo / xquery / yaml / yang / zig

Usage

<template>
  <tutorial>
    <tutorial-section>
      <tutorial-step slot="step">
        <p>...</p>
        <tutorial-highlighter slot="aside" :highlight-lines="[2]" :text="step1" title="file.txt" />
      </tutorial-step>

      <tutorial-step slot="step">
        <p>...</p>
        <tutorial-highlighter slot="aside" :highlight-lines="[/script/]" :text="step2" title="file.txt" />
      </tutorial-step>

      <tutorial-step slot="step">
        <p>...</p>
        <tutorial-highlighter slot="aside" :highlight-lines="['10:14']" :text="step3" title="file.txt" />
      </tutorial-step>
    </tutorial-section>
  </tutorial>
</template>

<script>
let step1 = `<template>
  <div id="app">My Vue SFC</div>
</template>`;

let step2 = `${step1}

<script>
export default {
}
<\/script>`;

let step3 = `${step2}

<style>
#app {
  padding: 10px;
}
</style>`;

export default {
  data() {
    return {
      step1,
      step2,
      step3
    };
  }
};
</script>

Result

Examples

Hello World

Theme: vue, Code Theme: tomorrow

Screen Shot 2020-08-20 at 6 00 39 PM

Edit zealous-grass-czz5i


C# Tutorial

Theme: azure, Code Theme: vs

Screen Shot 2020-08-20 at 6 59 28 PM

Shows using a different language besides vue.

Edit zealous-grass-czz5i

You might also like...
Vue component to easily build (or use presets) SVG loading cards Facebook like.
Vue component to easily build (or use presets) SVG loading cards Facebook like.

Vue Content Loading Vue component to easily build or use presets for Facebook-like SVG loading cards. Inspired in React Content Loader So how does it

Easily Build Your Vue.js App For Desktop With Electron
Easily Build Your Vue.js App For Desktop With Electron

Vue CLI Plugin Electron Builder Easily Build Your Vue.js App For Desktop With Electron Build status: Top Supporters Glenn Frank Quick Start: Open a te

Vue component to easily build (or use presets) SVG loading cards Facebook like.
Vue component to easily build (or use presets) SVG loading cards Facebook like.

Vue component to easily build (or use presets) SVG loading cards Facebook like.

🕵️‍♀️🕵️‍♂️ One easy-to-use component for Vue.js to build beautiful responsive timelines.
🕵️‍♀️🕵️‍♂️ One easy-to-use component for Vue.js to build beautiful responsive timelines.

Documentation You can browse the documentation for Vue Timeline on the website. Installation npm install @growthbunker/vuetimeline # Or if you prefer

Easily build a next generation web application using microfrontends
Easily build a next generation web application using microfrontends

Easily build a next generation web application using microfrontends. Piral enables you to create a modular frontend application that is extended at runtime with decoupled modules called pilets leveraging a microfrontend architecture.

Hippy is designed for developers to easily build cross-platform and high-performance awesome apps. 👏

Hippy is a cross-platform development framework, that aims to help developers write once, and run on multiple platforms(iOS, Android, Web, and so on). Hippy is quite friendly to Web developers, especially those who are familiar with React or Vue. With Hippy, developers can create the cross-platform app easily.

A Webpage build with Nuxtjs and Vuetify to easily show and switch between multiple OpenAPI descriptions

OpenAPI Viewer This repo contains a Webpage build with Nuxtjs and Vuetify to easily show and switch between multiple OpenAPI descriptions. The data co

Use EasyVueUI ui components to build web page easily (vue3 project)

EasyVueUI Use EasyVueUI ui components to build web page easily (vue3 project) This template should help get you started developing with Vue 3 in Vite.

👔 💼 Build fast 🚀 and easy multiple beautiful resumes and create your best CV ever!
👔 💼 Build fast 🚀 and easy multiple beautiful resumes and create your best CV ever!

best-resume-ever 👔 💼 Build fast 🚀 and easy multiple beautiful resumes and create your best CV ever! Made with Vue and LESS. Cool Creative Green Pur

🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)
🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications
vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications

Vue Instant! vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications. Table of contents Examp

Easily set meta-tags with vue.js - a `vue-headful` alternative

vue-simple-headful A simple ts-friendly meta-tag manager for Vue.js This is a direct and fully reworked fork of vue-headful. It is meant to make headf

vue3-chart-v2 is a wrapper for Chart.js in vue 3. You can easily create reuseable chart components. Inspired by vue-chartjs
vue3-chart-v2 is a wrapper for Chart.js in vue 3. You can easily create reuseable chart components. Inspired by vue-chartjs

vue3-chart-v2 vue3-chart-v2 is a wrapper for Chart.js in Vue 3. You can easily create reuseable chart components. Inspired by vue-chartjs Looking for

A VueJS 3 starter to create Vue applications easily and quickly with Vue Router, Snowpack, TypeScript and SCSS

VueJS 3 Starter ✨ A VueJS 3 starter to create Vue applications easily and quickly with Vue Router, Snowpack, TypeScript and SCSS Architecture ├─ publi

vue-auth is easily configurable solution for Vue.js that provides local login/registration as well as Social login using Github, Facebook, Google and other OAuth providers.

vue-auths vue-auth is easily configurable solution for Vue.js that provides local login/registration as well as Social login using Github, Facebook, G

vue-authenticate is easily configurable solution for Vue.js that provides local login/registration as well as Social login using Github, Facebook, Google and other OAuth providers.

vue-authenticate is easily configurable solution for Vue.js that provides local login/registration as well as Social login using Github, Facebook, Google and other OAuth providers.

A Vue.js component to create beautiful animated circular progress bars. https://vue-ellipse-progress-demo.netlify.com/
A Vue.js component to create beautiful animated circular progress bars. https://vue-ellipse-progress-demo.netlify.com/

vue-ellipse-progress A dependency-free Vue.js plugin to create beautiful and animated circular progress bars, implemented with SVG. The purpose of thi

Vue Carousel 3D - Beautiful, flexible and touch supported 3D Carousel for Vue.js

Vue Carousel 3d The repository is back in action. I'll try to keep it updated and to merge pull requests occasionally. Also, some new features are com

🌟Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards.
🌟Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards.

Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards. Documentation & Demo • Official Page Getting Started Getting started with Sh

Comments
Owner
Electron Vue Window Toolkit
The missing toolkit for making great Electron apps
Electron Vue Window Toolkit
React inspired style guide generator for Vue.js

?? [20/09/2017] Project discontinued ?? For purpose of having a demo of your Vuejs components please take a look at following projects that do really

Mikhail Kuznetcov 123 Jul 30, 2020
Created from react styleguidist for Vue Components with a living style guide

Isolated Vue component development environment with a living style guide Start documenting now on codesandbox.io Sponsors A big thank you to our spons

Vue Styleguidist 2.3k Nov 22, 2022
A library for documenting Vue components

Elucidate A library that makes it a breeze to "shed light" on your Vue component. Demo: https://mattrothenberg.github.io/vue-elucidate-example Demo Vi

Matt Rothenberg 35 Nov 16, 2022
:sparkles: Markdown files to ALIVE Vue components.

vue-md-loader Introduction Webpack loader for converting Markdown files to ALIVE Vue components. Configurable Markdown-It parser. Built-in syntax high

wxsm 111 Nov 20, 2022
A simple plugin for jsdoc (`pase vue SFC info to description`)

jsdoc-vue-component A simple plugin for jsdoc (pase vue SFC info to description by AST analysis). Maybe you will try jsdoc-vuedoc, and you have a bett

Season Chen 11 May 7, 2022
Custom story blocks for Vue single file components

vue-storybook Custom <story> blocks for Vue single file components that work out of the box with Vue CLI 3 and vue-cli-plugin-storybook. yarn add vue-

Matt Rothenberg 151 Aug 3, 2022
🤗 One-stop solution for vue component documentation. Original org: https://github.com/vuese

vuese One-stop solution for vue component documentation This project is supported by our Backers Document For detailed documentation: vuese.org Overvi

vuese 1.6k Nov 29, 2022
Generate a JSON documentation for a SFC Vue component. Contribute: https://gitlab.com/vuedoc/parser#contribute

The Vuedoc Parser Generate a JSON documentation for a Vue file component. Table of Contents Install Features Options Usage Syntax Add component name A

null 86 Nov 15, 2022
A webpack loader for markdown file transform to vue file.

vue-dotmd-loader A webpack loader for loader markdown file transform to vue file. 中文 Features: Support to import Vue file components and render them i

蓝月萧枫 10 May 18, 2022
Vue's template compiler reimplemented in Rust!

Vue Compiler in Rust Try it out in the wasm playground! Evan says: Maybe in the long run we want the whole transform (and even the Vue compiler!) to b

Herrington Darkholme 666 Nov 21, 2022