npmpackage.info

vue-typical

🐡 Vue Animated typing in ~400 bytes of JavaScript

2.1.0

177

MIT

TypeScript

729.00 B

33,891 1.7

Installations

npm install vue-typical

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

14.15.5

NPM Version

6.14.11 Pull Requests

Open

15

Total

40

Closed

22

Merged

3

Issues

Open

1

Total

4

Closed

3

Releases

Add blink style effect classname

v1.5.0

Published on 30 Dec 2020

View all 1 releases

Contributors

Unable to fetch Contributors

View all 2 contributors

Languages

TypeScript

JavaScript

Vue

TypeScript (46.86%)

JavaScript (35.25%)

Vue (17.89%)

Developer

Turkyden

Download Statistics

Total Downloads

33,891

Last Day

Last Week

132

Last Month

696

Last Year

9,979

GitHub Statistics

177 Stars

111 Commits

16 Forks

1 Watching

19 Branches

2 Contributors

Bundle Size

1.36 kB

Minified

729.00 B

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

2.1.0

Package Id

vue-typical@2.1.0

Unpacked Size

15.77 kB

Size

5.94 kB

File Count

NPM Version

6.14.11

Node Version

14.15.5

Total Downloads

Cumulative downloads

Total Downloads

33,891

Last day

-32%

Compared to previous day

Last week

-40.3%

132

Compared to previous week

Last month

-8.8%

696

Compared to previous month

Last year

32.2%

9,979

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

English | 简体中文

Vue Typical

Vue Animated typing in ~400 bytes 🐡 of JavaScript. Preview →

npm license

Live Demo ✨ https://vue-typical.vercel.app

📦 Installation

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>

🚀 Usage

1. Component

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>

2. Plugin API

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.

3. Composition API

You can also create typical animation by the composition API useTypical.

1const ref = useTypical(options);

Coming Soon ...

📑 Properties

Prop	Required	Type	Eg.
`steps`	True	Array<String \| Number \| Function>	`['Hello', 1000, () => alert('Word')]`
`loop`	False	Number	`1` or `'Infinity'`
`wrapper`	False	String	`'div'`

✨ Style

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}

🔢 Coming Soon

The demo of composition API in Vue 3.0

🔨 Contribute

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

❤️ Contributors

Thanks goes to these people:

Contributors

Please Feel free to enjoy and participate in open source!

⭐ Stargazers

Thanks for your star!

🔖 License

This library is based on @camwiegert/typical work and it currently is just a wrapper for vue.

Inspired by @catalinmiron/react-typical.

MIT © Turkyden

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

51 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-mv48-hcvh-8jj8
Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67
Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

1.7

/10

Last Scanned on 2025-01-27

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 More

Other packages similar to vue-typical

typical-vue-comps

1.1.9

my typical-vue-comps

vue-element-admin

3.9.3

A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features

quick-vue-spa

1.0.7

Quickly create a typical Vue SPA project

@vue-cdk/build-vue-lib

0.10.1

- **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

vue-typical

Installations

Developer Guide

Yes

CommonJS

14.15.5

6.14.11

Pull Requests

15

40

22

3

Issues

1

4

3

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

1.36 kB

729.00 B

Maintainers

Package Meta Information

Total Downloads

33,891

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

Vue Typical

📦 Installation

🚀 Usage

1. Component

2. Plugin API

3. Composition API

📑 Properties

✨ Style

🔢 Coming Soon

🔨 Contribute

❤️ Contributors

⭐ Stargazers

🔖 License

10

10

0

0

0

0

0

0

0

0

1.7

/10

Other packages similar to vue-typical