Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/evwt/vue-tut

Easily build beautiful tutorials with Vue
https://github.com/evwt/vue-tut

documentation tutorial vue

Last synced: 26 days ago
JSON representation

Easily build beautiful tutorials with Vue

Host: GitHub
URL: https://github.com/evwt/vue-tut
Owner: evwt
Created: 2020-08-20T22:59:03.000Z (almost 4 years ago)
Default Branch: master
Last Pushed: 2020-08-28T17:27:49.000Z (over 3 years ago)
Last Synced: 2024-01-02T23:40:01.478Z (5 months ago)
Topics: documentation, tutorial, vue
Language: CSS
Homepage:
Size: 1.75 MB
Stars: 44
Watchers: 2
Forks: 3
Open Issues: 0
Metadata Files:
- Readme: README.md

Lists

awesome-vue - vue-tut - Easily build beautiful tutorials with Vue. (Components & Libraries / Dev Tools)
awesome-vue - vue-tut - Easily build beautiful tutorials with Vue. (Components & Libraries / Dev Tools)
awesome-vue - vue-tut - Easily build beautiful tutorials with Vue. (Components & Libraries / Dev Tools)
awesome-vue - vue-tut - Easily build beautiful tutorials with Vue. (Components & Libraries / Dev Tools)
awesome-vue - vue-tut - Easily build beautiful tutorials with Vue. (Components & Libraries / Dev Tools)
awesome-vue - vue-tut - Easily build beautiful tutorials with Vue. (Components & Libraries / Dev Tools)
awesome-vue - vue-tut - Easily build beautiful tutorials with Vue. (Components & Libraries / Dev Tools)

README

        # VueTut

Easily build beautiful tutorials with Vue.

**📒  ⠀[Docs](https://evwt.github.io/vue-tut/)**




**🖥  ⠀[Tutorial/Demo](https://vn192.csb.app/)**




 [![Join the chat at https://gitter.im/vue-tut/community](https://badges.gitter.im/vue-tut/community.svg)](https://gitter.im/vue-tut/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

 

## Install

```bash

npm i vue-tut

```

## Setup

```js

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

```vue

  

    

      

        
...

        

      

      

        
...

        

      

      

        
...

        

      

    

  

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

    };

  }

};

```

Result

## Examples

### Hello World

Theme: `vue`, Code Theme: `tomorrow`



[![Edit zealous-grass-czz5i](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/zealous-grass-czz5i?fontsize=14&hidenavigation=1&theme=light)



### C# Tutorial

Theme: `azure`, Code Theme: `vs`



Shows using a different language besides vue.

[![Edit zealous-grass-czz5i](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/spring-cdn-z3e3c?fontsize=14&hidenavigation=1&theme=light)