{"id":22484094,"url":"https://github.com/evwt/vue-tut","last_synced_at":"2025-08-02T17:31:49.884Z","repository":{"id":143890241,"uuid":"289127616","full_name":"evwt/vue-tut","owner":"evwt","description":"Easily build beautiful tutorials with Vue","archived":false,"fork":false,"pushed_at":"2020-08-28T17:27:49.000Z","size":1833,"stargazers_count":47,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-10T17:08:46.326Z","etag":null,"topics":["documentation","tutorial","vue"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/evwt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-08-20T22:59:03.000Z","updated_at":"2024-03-12T18:53:49.000Z","dependencies_parsed_at":"2024-01-02T23:40:16.566Z","dependency_job_id":"488f224d-d2f0-4470-a211-a4280a3955e5","html_url":"https://github.com/evwt/vue-tut","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evwt%2Fvue-tut","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evwt%2Fvue-tut/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evwt%2Fvue-tut/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evwt%2Fvue-tut/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evwt","download_url":"https://codeload.github.com/evwt/vue-tut/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228499947,"owners_count":17929978,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["documentation","tutorial","vue"],"created_at":"2024-12-06T17:10:17.806Z","updated_at":"2025-08-02T17:31:49.871Z","avatar_url":"https://github.com/evwt.png","language":"CSS","funding_links":[],"categories":["CSS","Dev Tools [🔝](#readme)","Components \u0026 Libraries"],"sub_categories":["Dev Tools"],"readme":"# VueTut\n\nEasily build beautiful tutorials with Vue.\n\n**📒  ⠀[Docs](https://evwt.github.io/vue-tut/)**\n\u003cbr\u003e\n**🖥  ⠀[Tutorial/Demo](https://vn192.csb.app/)**\n\u003cbr\u003e\n\n [![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\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n \n## Install\n\n```bash\nnpm i vue-tut\n```\n\n## Setup\n\n```js\nimport VueTut from 'vue-tut';\nimport 'vue-tut/dist/vue-tut.min.css';\n\n// Select a tutorial theme\nimport 'vue-tut/dist/themes/vue.css';\n\n// Select a code highlighting theme\nimport 'vue-tut/dist/code-themes/vue.css';\n\nVue.use(VueTut);\n```\n\n### Themes\n\n#### Tutorial\n\n`vue` or `azure`\n\n#### Highlighting\n\n\u003ca href=\"https://github.com/PrismJS/prism-themes\"\u003eprism-themes themes\u003c/a\u003e\n\u003cbr\u003e\n`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`\n\u003cbr\u003e\u003cbr\u003e\n\u003ca href=\"https://prismjs.com/\"\u003eOfficial themes\u003c/a\u003e\n\u003cbr\u003e\n`coy` / `dark` / `funky` / `okaidia` / `prism` / `solarizedlight` / `tomorrow` / `twilight`\n\u003cbr\u003e\u003cbr\u003e\nvue-tut themes\n\u003cbr\u003e\n`vue`\n\n### Languages\n\n`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`\n\n## Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003ctutorial\u003e\n    \u003ctutorial-section\u003e\n      \u003ctutorial-step slot=\"step\"\u003e\n        \u003cp\u003e...\u003c/p\u003e\n        \u003ctutorial-highlighter slot=\"aside\" :highlight-lines=\"[2]\" :text=\"step1\" title=\"file.txt\" /\u003e\n      \u003c/tutorial-step\u003e\n\n      \u003ctutorial-step slot=\"step\"\u003e\n        \u003cp\u003e...\u003c/p\u003e\n        \u003ctutorial-highlighter slot=\"aside\" :highlight-lines=\"[/script/]\" :text=\"step2\" title=\"file.txt\" /\u003e\n      \u003c/tutorial-step\u003e\n\n      \u003ctutorial-step slot=\"step\"\u003e\n        \u003cp\u003e...\u003c/p\u003e\n        \u003ctutorial-highlighter slot=\"aside\" :highlight-lines=\"['10:14']\" :text=\"step3\" title=\"file.txt\" /\u003e\n      \u003c/tutorial-step\u003e\n    \u003c/tutorial-section\u003e\n  \u003c/tutorial\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nlet step1 = `\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003eMy Vue SFC\u003c/div\u003e\n\u003c/template\u003e`;\n\nlet step2 = `${step1}\n\n\u003cscript\u003e\nexport default {\n}\n\u003c\\/script\u003e`;\n\nlet step3 = `${step2}\n\n\u003cstyle\u003e\n#app {\n  padding: 10px;\n}\n\u003c/style\u003e`;\n\nexport default {\n  data() {\n    return {\n      step1,\n      step2,\n      step3\n    };\n  }\n};\n\u003c/script\u003e\n```\n\n\u003ca href=\"https://clvw9.csb.app/\" target=\"_blank\"\u003eResult\u003c/a\u003e\n\n## Examples\n\n### Hello World\nTheme: `vue`, Code Theme: `tomorrow`\n\n\u003ca href=\"https://czz5i.csb.app/\" target=\"_blank\"\u003e\u003cimg width=\"500\" alt=\"Screen Shot 2020-08-20 at 6 00 39 PM\" src=\"https://user-images.githubusercontent.com/611996/90835167-7b409280-e311-11ea-8e2d-5a685f46ad64.png\"\u003e\u003c/a\u003e\n\n\n[![Edit zealous-grass-czz5i](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/zealous-grass-czz5i?fontsize=14\u0026hidenavigation=1\u0026theme=light)\n\n\u003chr\u003e\n\n### C# Tutorial\nTheme: `azure`, Code Theme: `vs`\n\n\u003ca href=\"https://z3e3c.csb.app/\" target=\"_blank\"\u003e\u003cimg width=\"500\" alt=\"Screen Shot 2020-08-20 at 6 59 28 PM\" src=\"https://user-images.githubusercontent.com/611996/90942041-ac849580-e3d9-11ea-818c-a1d9bc82def1.png\"\u003e\u003c/a\u003e\n\n\nShows using a different language besides vue.\n\n[![Edit zealous-grass-czz5i](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/spring-cdn-z3e3c?fontsize=14\u0026hidenavigation=1\u0026theme=light)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevwt%2Fvue-tut","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevwt%2Fvue-tut","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevwt%2Fvue-tut/lists"}