This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
A Vue 3 component for creating a typewriter effect with customizable options.
Click here for a live demo.
- Install '@reusable-ui-tr/vue3-type-writer-effect' with npm
npm i @reusable-ui-tr/vue3-type-writer-effect
- Install 'autoprefixer' with npm
npm i autoprefixer
- Import the autoprefixer package into vite.config.ts and add the autoprefixer plugin to the defineConfig function
import autoprefixer from "autoprefixer";
export default defineConfig({
css: {
postcss: {
plugins: [autoprefixer],
},
},
});- Import TypeWriterEffect component in your vue3 component
import TypeWriterEffect from "@reusable-ui-tr/vue3-type-writer-effect";- Use 'TypeWriterEffect' component inside a template
<TypeWriterEffect
blink-duration="2s"
cursor-color="blue"
font-family="Lucida Console"
font-size="20px"
highlight-color="green"
text="Hello World!"
text-color="white"
text-wrapper-element-type="p"
typing-speed="slow"
/>| Property Name | Property Type | Usage | Default Value | Required |
|---|---|---|---|---|
| blink-duration | String | Blink duration of typewriter effect in seconds or milliseconds (Example values: '1s', '10ms' etc.) | '1s' | no |
| cursor-color | String | All CSS legal color values are supported. (Example values: '#00ff00', #00ff0080, rgb(0, 255, 0), rgba(0, 255, 0, 0.3), hsl(120, 60%, 70%), hsla(120, 60%, 70%, 0.3), 'green' etc.) | 'black' | no |
| font-family | String | Font family of the text | 'Roboto, Arial, sans-serif' | no |
| font-size | String | Font size of the text | '16px' | no |
| highlight-color | String | Highlight color of the text | 'transparent' | no |
| text | String | Content of the text | none | yes |
| text-color | String | All CSS legal color values are supported. (Example values: '#00ff00', #00ff0080, rgb(0, 255, 0), rgba(0, 255, 0, 0.3), hsl(120, 60%, 70%), hsla(120, 60%, 70%, 0.3), 'green' etc.) | 'black' | no |
| text-wrapper-element-type | String | Type of HTML element to wrap text (All HTML elements are valid) | 'code' | no |
| typing-speed | String | Typing speed of typewriter effect (Only following keywords are valid: 'slowest', 'slow', normal', 'fast', 'fastest') | 'normal' | no |