{"id":15065359,"url":"https://github.com/ayitinya/vue-typewriter-effect","last_synced_at":"2025-10-07T05:04:28.289Z","repository":{"id":65400434,"uuid":"584262579","full_name":"ayitinya/vue-typewriter-effect","owner":"ayitinya","description":"A Vue Js wrapper for typewriter-effect","archived":false,"fork":false,"pushed_at":"2023-10-07T10:53:28.000Z","size":662,"stargazers_count":12,"open_issues_count":3,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-26T05:58:49.195Z","etag":null,"topics":["npm-package","vue","vue3","vuecomponent"],"latest_commit_sha":null,"homepage":"https://ayitinya.github.io/vue-typewriter-effect","language":"Vue","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/ayitinya.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-02T03:15:38.000Z","updated_at":"2025-05-15T05:41:22.000Z","dependencies_parsed_at":"2025-05-06T07:01:02.883Z","dependency_job_id":null,"html_url":"https://github.com/ayitinya/vue-typewriter-effect","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/ayitinya/vue-typewriter-effect","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayitinya%2Fvue-typewriter-effect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayitinya%2Fvue-typewriter-effect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayitinya%2Fvue-typewriter-effect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayitinya%2Fvue-typewriter-effect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ayitinya","download_url":"https://codeload.github.com/ayitinya/vue-typewriter-effect/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayitinya%2Fvue-typewriter-effect/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278722757,"owners_count":26034463,"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","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["npm-package","vue","vue3","vuecomponent"],"created_at":"2024-09-25T00:37:20.461Z","updated_at":"2025-10-07T05:04:28.254Z","avatar_url":"https://github.com/ayitinya.png","language":"Vue","funding_links":[],"categories":["\u003ca name=\"V\"\u003e \u003c/a\u003eV"],"sub_categories":[],"readme":"# Vue Typewriter Effect\n\n[![npm](https://img.shields.io/npm/v/vue-typewriter-effect?style=flat-square)](https://www.npmjs.com/package/vue-typewriter-effect)\n[![npm](https://img.shields.io/npm/dw/vue-typewriter-effect?style=flat-square)](https://www.npmjs.com/package/vue-typewriter-effect)\n[![GitHub](https://img.shields.io/github/license/ayitinya/vue-typewriter-effect?style=flat-square)](https://github.com/ayitinya/vue-typewriter-effect/blob/main/LICENSE)\n\n## Introduction\n\nVue Typewriter Effect is a Vue.js wrapper for [Typewriter Effect](https://www.npmjs.com/package/typewriter-effect) package that has an average of over 10k weekly downloads.\nThe package is a simple and lightweight library that allows you to use typewriter effect in your Vue.js projects with ease.\n\n## Getting Started\n\nInstall `vue-typewriter-effect` with npm:\n\n```bash\nnpm install vue-typewriter-effect\n```\n\nwith yarn:\n\n```bash\nyarn add vue-typewriter-effect\n```\n\n## Usage\n\nImport the component and register it globally in your Vue instance:\n\n```js\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\n\nconst app = createApp(App);\n\napp\n    .component(\"vue-typewriter-effect\", VueTypewriterEffect)\n    .mount(\"#app\");\n```\n\nor locally in your component:\n\n```vue\nimport VueTypewriterEffect from \"vue-typewriter-effect\";\n```\n\nUse the component in your template:\n\n```vue\n\u003cvue-typewriter-effect :strings=\"['hello', 'world']\" /\u003e\n```\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| element | `String` | `span` | The HTML element to use for the wrapper. |\n| strings | `Array` | `[\"Hello\", \"World\"]` |Strings to type out when using autoStart option |\n| cursor | `String` | `pipe character` | String value to use as the cursor. |\n| delay | `Number` | `natural` | `natural` | The delay between each key when typing. |\n| deleteSpeed | `Number` | `natural` | `natural` | The delay between each key when deleting. |\n| loop | `Boolean` | `false` | Whether to loop the strings. |\n| autoStart | `Boolean` | `true` | Whether to start typing automatically. |\n| pauseFor | `Number` | `1500` | The pause duration after a string is typed when using autostart mode. |\n| devMode | `Boolean` | `false` |  Whether or not to display console logs. |\n| skipAddStyles | `Boolean` | `false` | Whether or not to skip adding styles to the document. |\n| wrapperClassName | `String` | `Typewriter__wrapper` | The class name to use for the wrapper element. |\n| cursorClassName | `String` | `Typewriter__cursor` | The class name to use for the cursor element. |\n| stringSplitter | `Function` | `null` | A function that splits the string into an array of characters. [Example](https://codesandbox.io/s/typewriter-effect-emojis-pgz6e) |\n| onCreateTextNode | `Function` | `null` | Callback function to replace the internal method which creates a text node for the character before adding it to the DOM. If you return null, then it will not add anything to the DOM and so it is up to you to handle it. |\n| onRemoveNode | `Function` | `null` | Callback function when a node is about to be removed. First param will be an object `{ node: HTMLNode, charater: string }` |\n\nSee the [Typewriter Effect](https://www.npmjs.com/package/typewriter-effect) package for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayitinya%2Fvue-typewriter-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayitinya%2Fvue-typewriter-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayitinya%2Fvue-typewriter-effect/lists"}