Gathering detailed insights and metrics for vue-typical
Gathering detailed insights and metrics for vue-typical
Gathering detailed insights and metrics for vue-typical
Gathering detailed insights and metrics for vue-typical
npm install vue-typical
Typescript
Module System
Node Version
NPM Version
69.4
Supply Chain
98.2
Quality
75.9
Maintenance
100
Vulnerability
100
License
TypeScript (46.86%)
JavaScript (35.25%)
Vue (17.89%)
Total Downloads
37,736
Last Day
17
Last Week
139
Last Month
676
Last Year
11,448
MIT License
175 Stars
111 Commits
16 Forks
19 Branches
2 Contributors
Updated on May 16, 2025
Minified
Minified + Gzipped
Latest Version
2.1.0
Package Id
vue-typical@2.1.0
Unpacked Size
15.77 kB
Size
5.94 kB
File Count
12
NPM Version
6.14.11
Node Version
14.15.5
Cumulative downloads
Total Downloads
33
English | 简体中文
Vue Animated typing in ~400 bytes 🐡 of JavaScript. Preview →
Live Demo ✨ https://vue-typical.vercel.app
Install with yarn
1yarn add vue-typical
Or you can
1npm install vue-typical
Or inject the script at your page by jsdelivr CDN
1<script src="https://cdn.jsdelivr.net/npm/vue-typical@latest/dist/vue-typical.umd.js"></script>
You can import it as a custom component.
1<template> 2 <v-typical 3 class="blink" 4 :steps="['Hello', 1000, 'Hello World !', 500, 'Hello World ! 👋', 1000]" 5 :loop="Infinity" 6 :wrapper="'h2'" 7 ></v-typical> 8</template> 9 10<script lang="ts"> 11import VTypical from 'vue-typical'; 12 13export default { 14 components: { 15 VTypical, 16 }, 17}; 18</script>
If you want to configure default options, you can register this plugin through the use API of Vue.js.
1// main.js or index.js 2import VTypical from 'vue-typical'; 3 4Vue.use(VTypical, { 5 /* options */ 6});
If you use the plugin API, the VTypical
component will be registered as a global component just like when including it with the script
tag, but you won't need to re-register it through the components
property in your own components.
You can also create typical animation by the composition API useTypical
.
1const ref = useTypical(options);
Coming Soon ...
Prop | Required | Type | Eg. |
---|---|---|---|
steps | True | Array<String | Number | Function> | ['Hello', 1000, () => alert('Word')] |
loop | False | Number | 1 or 'Infinity' |
wrapper | False | String | 'div' |
Add the blink cursor effect with blink
classname.
1.blink::after { 2 content: '|'; 3 animation: blink 1s infinite step-start; 4} 5 6@keyframes blink { 7 50% { 8 opacity: 0; 9 } 10}
Install dependencies,
1$ npm i
Start the dev server,
1$ npm start
Build documentation,
1$ npm run docs:build
Build library via father-build
,
1$ npm run build
Thanks goes to these people:
Please Feel free to enjoy and participate in open source!
Thanks for your star!
This library is based on @camwiegert/typical work and it currently is just a wrapper for vue.
Inspired by @catalinmiron/react-typical.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/28 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
60 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreLast Day
-10.5%
17
Compared to previous day
Last Week
0.7%
139
Compared to previous week
Last Month
-23.2%
676
Compared to previous month
Last Year
65.8%
11,448
Compared to previous year
typical-vue-comps
my typical-vue-comps
vue-element-admin
A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features
quick-vue-spa
Quickly create a typical Vue SPA project
@vue-cdk/build-vue-lib
- **Entry Point:** Located at `src/index.js`. - **Main Fields in `package.json`:** - **Browser Builds:** `main` – typical value: `dist/index.js` - **ESM Builds:** `module` – typical value: `dist/index.esm.js` - **UMD Builds:** `unpkg` – typical valu