Easily build beautiful tutorials with Vue

Related tags

Docs documentation tutorial 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

Lucas Leandro 760 Jan 3, 2023
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

Noah Klayman 3.9k Dec 31, 2022
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.

Lucas Leandro 759 Nov 29, 2022
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.

smapiot 1.5k Jan 9, 2023
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.

Tencent 7.2k Jan 4, 2023
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

null 2 Sep 1, 2022
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.

null 4 Sep 7, 2022
🕵️‍♀️🕵️‍♂️ 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

Julien Le Coupanec 331 Dec 22, 2022
👔 💼 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

Sara Steiert 15.8k Jan 1, 2023
🚀🚀🚀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)

good luck 13.4k Jan 1, 2023
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

Santiago Blanco 420 Dec 27, 2022
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

Very Wow 17 Dec 5, 2022
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

Vu Tran 36 Jun 19, 2022
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

null 1 Jun 1, 2022
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

Chantouch 1 Aug 9, 2020
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.

Altafino Ltd 1 Jul 23, 2021
A simple, easily configurable accordion or collapsible for Vue, styled with Bulma

vue-bulma-accordion A simple, easily configurable accordion or collapsible for Vue, styled with Bulma. Full docs here New in 0.5 SSR Support! Table of

Gabriel Soicher 33 Nov 24, 2022
Easily bind a chart to the data stored in your Vue.js components.
Easily bind a chart to the data stored in your Vue.js components.

A plugin for adding charts to Vue Table of Contents Purpose Usage Performance Consideration Build Setup Purpose This plugin is designed to allow Vue.j

Brian Greig 198 Jul 26, 2022
A lightweight collection of Vue components (including molecules and organisms) to manage dates easily

vue-date-tools VueJS Date Components based on the date-fns library Click Here to Try the Live Demo Best features: Lightweight and almost no dependenci

Antoine S 12 Nov 24, 2022
Comments
Owner
Electron Vue Window Toolkit
The missing toolkit for making great Electron apps
Electron Vue Window Toolkit
GitHub
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 Dec 28, 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 34 Dec 6, 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 Jan 1, 2023
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 686 Jan 3, 2023