{"id":14973764,"url":"https://github.com/orlandster/vue-typed-js","last_synced_at":"2025-04-05T15:06:50.052Z","repository":{"id":32431435,"uuid":"133411657","full_name":"Orlandster/vue-typed-js","owner":"Orlandster","description":"Typed.js integration for vue.js. Create a typing animation.","archived":false,"fork":false,"pushed_at":"2022-12-06T17:05:34.000Z","size":396,"stargazers_count":480,"open_issues_count":41,"forks_count":38,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-05T15:06:46.209Z","etag":null,"topics":["typed","typed-js","typing","typing-animation","vue","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"http://www.mattboldt.com/demos/typed-js/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Orlandster.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-14T19:31:07.000Z","updated_at":"2025-02-28T03:02:34.000Z","dependencies_parsed_at":"2023-01-14T21:11:08.376Z","dependency_job_id":null,"html_url":"https://github.com/Orlandster/vue-typed-js","commit_stats":null,"previous_names":["orlandster1998/vue-typed-js"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Orlandster%2Fvue-typed-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Orlandster%2Fvue-typed-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Orlandster%2Fvue-typed-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Orlandster%2Fvue-typed-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Orlandster","download_url":"https://codeload.github.com/Orlandster/vue-typed-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353745,"owners_count":20925329,"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":["typed","typed-js","typing","typing-animation","vue","vuejs","vuejs2"],"created_at":"2024-09-24T13:49:22.789Z","updated_at":"2025-04-05T15:06:50.028Z","avatar_url":"https://github.com/Orlandster.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-typed-js\n\n[![npm](https://img.shields.io/npm/v/vue-typed-js.svg) ![npm](https://img.shields.io/npm/dm/vue-typed-js.svg)](https://www.npmjs.com/package/vue-typed-js)\n[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/8789841c45264d19ad2595061437a8a9)](https://www.codacy.com/app/orlando.wenzinger/vue-typed-js?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=Orlandster1998/vue-typed-js\u0026amp;utm_campaign=Badge_Grade)\n\nA Vue.js integration for Typed.js.\n\nTyped.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.\n\nCheckout the offical project [here](https://github.com/mattboldt/typed.js/).\n\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Example](#examples)\n\n# Installation\n\n```\nnpm install --save vue-typed-js\n```\n\n## Default import\n\nInstall the component:\n\n```javascript\nimport Vue from 'vue'\nimport VueTypedJs from 'vue-typed-js'\n\nVue.use(VueTypedJs)\n```\n\n**⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.**\n\n## Browser import\n\n```html\n\u003clink rel=\"stylesheet\" href=\"vue-typed-js/dist/vue-typed-js.css\"/\u003e\n\n\u003cscript src=\"vue.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"vue-typed-js/dist/vue-typed-js.browser.js\"\u003e\u003c/script\u003e\n```\n\nThe plugin should be auto-installed. If not, you can install it manually with the instructions below.\n\nInstall all the components:\n\n```javascript\nVue.use(VueTypedJs)\n```\n\n# Usage\nTo get started simply add the `vue-typed-js` custom element to your `template` and pass the text, which should be typed to the `strings` property. In addition you need to pass an element with the class `typing` to the slot, which will be used as a `wrapper`.\n\nMinimal setup:\n\n```html\n\u003cvue-typed-js :strings=\"['First text', 'Second Text']\"\u003e\n  \u003ch1 class=\"typing\"\u003e\u003c/h1\u003e\n\u003c/vue-typed-js\u003e\n```\n\nThe `typing` class also allows you to just animate certain parts of a string:\n```html\n\u003cvue-typed-js :strings=\"['John', 'James']\"\u003e\n  \u003ch1\u003eHey \u003cspan class=\"typing\"\u003e\u003c/span\u003e\u003c/h1\u003e\n\u003c/vue-typed-js\u003e\n```\n\n## Properties\nYou can make use of the following properties in order to customize your typing expirience:\n\n| Property             | Type    | Description                                                          | Usage                                                           |\n|----------------------|---------|----------------------------------------------------------------------|-----------------------------------------------------------------|\n| strings              | Array   | strings to be typed                                                  | `:strings=\"['Text 1', 'Text 2']\"` |\n| stringsElement       | String  | ID of element containing string children                             | `:stringsElement=\"'myId'\"`                                                                |\n| typeSpeed            | Number  | type speed in milliseconds                                           | `:typeSpeed=\"50\"`                                                                |\n| startDelay           | Number  | time before typing starts in milliseconds                            | `:startDelay=\"1000\"`                                                                |\n| backSpeed            | Number  | backspacing speed in milliseconds                                    | `:backSpeed=\"10\"`                                                                |\n| smartBackspace       | Boolean | only backspace what doesn't match the previous string                | `:smartBackspace=\"true\"`                                                                |\n| shuffle              | Boolean | shuffle the strings                                                  | `:shuffle=\"true\"`                                                                |\n| backDelay            | Number  | time before backspacing in milliseconds                              | `:backDelay=\"100\"`                                                                |\n| fadeOut              | Boolean | Fade out instead of backspace                                        | `:fadeOut=\"true\"`                                                                |\n| fadeOutClass         | String  | css class for fade animation                                         | `:fadeOutClass=\"'fadeOutClass'\"`                                                                |\n| fadeOutDelay         | Number | fade out delay in milliseconds                                       | `:fadeOutDelay=\"500\"`                                                                |\n| loop                 | Boolean | loop strings                                                         | `:loop=\"true\"`                                                                |\n| loopCount            | Number  | amount of loops                                                      | `:loopCount=\"3\"`                                                                |\n| showCursor           | Boolean | show cursor                                                          | `:showCursor=\"true\"`                                                                |\n| cursorChar           | String  | character for cursor                                                 | `:cursorChar=\"'_'\"`                                                                |\n| autoInsertCss        | Boolean | insert CSS for cursor and fadeOut into HTML                          | `:autoInsertCss=\"true\"`                                                                |\n| attr                 | String  | attribute for typing Ex: input placeholder, value, or just HTML text | `:attr=\"'placeholder'\"`                                                                |\n| bindInputFocusEvents | Boolean | bind to focus and blur if el is text input                           | `:bindInputFocusEvents=\"true\"`                                                                |\n| contentType          | String  | 'html' or 'null' for plaintext                                       | `:contentType=\"'html'\"`                                                                |\n\n## Events\nYou can listen to the following events:\n\n| Event                  | Description                                                          | Usage                                                           |\n|------------------------|----------------------------------------------------------------------|-----------------------------------------------------------------|\n| onComplete             | All typing is complete                                               | `@onComplete=\"doSmth()\"` |\n| preStringTyped         | Before each string is typed                                          | `@preStringTyped=\"doSmth()\"`                                                                |\n| onStringTyped          | After each string is typed                                           | `@onStringTyped=\"doSmth()\"`                                                                |\n| onLastStringBackspaced | During looping, after last string is typed                           | `@onLastStringBackspaced=\"doSmth()\"`                                                                |\n| onTypingPaused         | Typing has been stopped                                              | `@onTypingPaused=\"doSmth()\"`                                                                |\n| onTypingResumed        | Typing has been started after being stopped                          | `@onTypingResumed=\"doSmth()\"`                                                                |\n| onReset                | After reset                                                          | `@onReset=\"doSmth()\"`                                                                |\n| onStop                 | After stop                                                           | `@onStop=\"doSmth()\"`                                                                |\n| onStart                | After start                                                          | `@onStart=\"doSmth()\"`                                                                |\n| onDestroy              | After destroy                                                        | `@onDestroy=\"doSmth()\"`                                                                |\n## Features\nCheckout features like `type pausing`, `smart backspacing` etc. on the libraries [page](https://github.com/mattboldt/typed.js/).\n\n# Examples\nHere are several examples:\n\n```html\n\u003c!-- infinite loop --\u003e\n\u003cvue-typed-js :strings=\"['awesome', 'brilliant']\" :loop=\"true\" @onComplete=\"doSmth()\"\u003e\n  \u003ch2\u003eWe are a \u003cspan class=\"typing\"\u003e\u003c/span\u003e company!\u003c/h2\u003e\n\u003c/vue-typed-js\u003e\n\n\u003c!-- type pausing --\u003e\n\u003cvue-typed-js :strings=\"['This is text ^1000 which gets paused for 1 second', 'wow, interesting']\"\u003e\n  \u003ch2 class=\"typing\"\u003e\u003c/h2\u003e\n\u003c/vue-typed-js\u003e\n\n\u003c!-- output html --\u003e\n\u003cvue-typed-js :strings=\"['\u003cp\u003eParagraph\u003c/p\u003e', '\u003cspan\u003eSpan\u003c/span\u003e']\" :contentType=\"'html'\"\u003e\n  \u003ch2 class=\"typing\"\u003e\u003c/h2\u003e\n\u003c/vue-typed-js\u003e\n```\n\n---\n\n# License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forlandster%2Fvue-typed-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Forlandster%2Fvue-typed-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forlandster%2Fvue-typed-js/lists"}