{"id":20139420,"url":"https://github.com/adolfok3/vue-auto-writer","last_synced_at":"2025-04-09T18:22:51.792Z","repository":{"id":60091885,"uuid":"540498468","full_name":"Adolfok3/vue-auto-writer","owner":"Adolfok3","description":"A simple and lightweight auto writer/typer component made with Vue.js.","archived":false,"fork":false,"pushed_at":"2022-09-27T17:23:45.000Z","size":345,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-21T06:18:52.267Z","etag":null,"topics":["auto-typer","auto-writer","component","typer","vue","vue-auto-typer","vue-auto-writer","vue-component","vue-typer","vue-writer","vue2","vue3","vuejs","vuejs2","vuejs3","writer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Adolfok3.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}},"created_at":"2022-09-23T15:14:21.000Z","updated_at":"2024-03-24T13:55:26.000Z","dependencies_parsed_at":"2023-01-18T21:01:29.118Z","dependency_job_id":null,"html_url":"https://github.com/Adolfok3/vue-auto-writer","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adolfok3%2Fvue-auto-writer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adolfok3%2Fvue-auto-writer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adolfok3%2Fvue-auto-writer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adolfok3%2Fvue-auto-writer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Adolfok3","download_url":"https://codeload.github.com/Adolfok3/vue-auto-writer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085860,"owners_count":21045228,"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":["auto-typer","auto-writer","component","typer","vue","vue-auto-typer","vue-auto-writer","vue-component","vue-typer","vue-writer","vue2","vue3","vuejs","vuejs2","vuejs3","writer"],"created_at":"2024-11-13T21:45:16.206Z","updated_at":"2025-04-09T18:22:51.772Z","avatar_url":"https://github.com/Adolfok3.png","language":"JavaScript","funding_links":["https://ko-fi.com/adolfok3"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/ySmlMPR.gif\" \u003e\n  \u003ch1\u003eVue Auto Writer\u003c/h1\u003e\n\u003c/div\u003e\n\u003cp align=\"center\"\u003e\n  Just a simple and lightweight auto writer/typer component made with Vue.js.\n\u003c/p\u003e\n\n[![version](https://img.shields.io/npm/v/vue-auto-writer.svg)](https://github.com/Adolfok3/vue-auto-writer)\n[![codecov](https://codecov.io/github/Adolfok3/vue-auto-writer/branch/master/graph/badge.svg)](https://codecov.io/github/Adolfok3/vue-auto-writer)\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)\n[![Downloads](https://img.shields.io/npm/dt/vue-auto-writer.svg)](https://github.com/Adolfok3/vue-auto-writer)\n[![Build](https://github.com/Adolfok3/vue-auto-writer/actions/workflows/master.yml/badge.svg)](https://github.com/Adolfok3/vue-auto-writer)\n\n## Demo\n[![Edit Checkbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-auto-writer-ygci59)\n\n## Installation\n### npm\n```bash\n$ npm install vue-auto-writer --save\n```\n\n### yarn (recommended)\n```bash\n$ yarn add vue-auto-writer\n```\n\n## Quick start\n### Vue.js\nYou can import in your `main.js` file\n\n```js\nimport Vue from \"vue\";\nimport VueAutoWriter from \"vue-auto-writer\";\n\nVue.use(VueAutoWriter);\n```\n\nOr locally in any component\n```js\nimport VueAutoWriter from \"vue-auto-writer\";\n\nexport default {\n  components: {\n    VueAutoWriter,\n  },\n};\n```\n\n## Basic usage\n\u003cimg src=\"https://i.imgur.com/BAn4INi.gif\"\u003e\n\n```html\n\u003ctemplate\u003e\n  \u003cvue-auto-writer base-text=\"Hello World\" /\u003e\n\u003c/template\u003e\n```\n\nYou can use a custom css class to change the writer text style\n\n\u003cimg src=\"https://i.imgur.com/hMdJ0Sc.gif\"\u003e\n\n```html\n\u003ctemplate\u003e\n  \u003cvue-auto-writer class=\"my-writer\" base-text=\"Hello World\" /\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n  .my-writer {\n    font-family: 'Fredoka One';\n    font-size: 20px;\n    font-weight: 600;\n    word-spacing: 5px;\n  }\n\u003c/style\u003e\n```\n\nWith replaceable texts. You can also use custom style to each replacement\n\n\u003cimg src=\"https://i.imgur.com/N7whXFw.gif\"\u003e\n\n```html\n\u003ctemplate\u003e\n  \u003cvue-auto-writer base-text=\"Hi! I'm\" :texts=\"replaceableTexts\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data: () =\u003e ({\n      replaceableTexts: [\n       {\n        value: 'John Doe',\n       },\n       {\n        value: 'Jane Doe',\n        style: 'color: red; font-size: 25px; background-color: yellow;'\n       },\n      ]\n    })\n  }\n\u003c/script\u003e\n```\n\n## Props\n| Property name        | Type    | Default | Required         | Description                                                                                |\n| -------------------- | ------- | ------- | ---------------- | ------------------------------------------------------------------------                   |\n| base-text            | String  |         |:heavy_check_mark:| String that contains the base text to be displayed                                         |\n| texts                | Array   |   []    |                  | Array of objects that contains the text and style which will be replaced                   |\n| delay-on-writer      | Number  |   100   |                  | Set the writing speed in milliseconds                                                      |\n| delay-on-start       | Number  |  1500   |                  | Set the delay before start write in milliseconds                                           |\n| delay-between-texts  | Number  |  1500   |                  | Set the delay before write next text in milliseconds                                       |\n| cursor-size          | Number  |   30    |                  | Set the cursor size in                                                                     |\n| cursor-color         | String  | #000000 |                  | Set the cursor color                                                                       |\n| cursor-blink-speed   | Number  |    2    |                  | Set the cursor blink speed                                                                 |\n| disable-cursor-blink | Boolean |  false  |                  | Disable the cursor blink                                                                   |\n| infinite             | Boolean |  false  |                  | Restarts writer after finish write the base text (won't work if the texts prop has passed) |\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/adolfok3)\n\n## License\nMIT © [Adolfok3](https://github.com/Adolfok3/vue-auto-writer/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadolfok3%2Fvue-auto-writer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadolfok3%2Fvue-auto-writer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadolfok3%2Fvue-auto-writer/lists"}