npmpackage.info

Gathering detailed insights and metrics for vue-sparkles

Other packages similar to vue-sparkles

vue-json-schema-form

1.0.4

Generate forms from your JSON schemas! :sparkles:

notification-quark

1.0.2

This quark is a simple vue plugin with notification component and added sparkles in the form of a store that handles the behaviour. <br/> It is a simple notification system that can be used to display messages to the user on plethora events happening in

Gathering detailed insights and metrics for vue-sparkles

vue-sparkles - 1.1.0 | npmpackage.info

vue-sparkles

A Vue component making things a little bit sparklier

1.1.0

JavaScript

38.83 kB

2.4

Installations

npm install vue-sparkles

Developer Guide

BETA

Typescript

No

Module System

CommonJS, UMD

Min. Node Version

>=10

Node Version

12.22.1

NPM Version

6.14.12 Pull Requests

Open

13

Total

18

Closed

4

Merged

1

Issues

Open

1

Total

3

Closed

2

Releases

Release 1.1

1.1-rc2

Updated on May 01, 2021

View All 1 releases

Languages

JavaScript

Vue

JavaScript (68.17%)

Vue (31.83%)

Developer

ericwaetke

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

10 Stars

20 Commits

2 Forks

1 Watchers

14 Branches

2 Contributors

Updated on May 07, 2024

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

1.1.0

Package Id

vue-sparkles@1.1.0

Unpacked Size

38.83 kB

Size

9.48 kB

File Count

NPM Version

6.14.12

Node Version

12.22.1

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

vue

Dev Dependencies

@babel/core @babel/preset-env @rollup/plugin-alias @rollup/plugin-commonjs @rollup/plugin-replace @vue/cli-plugin-babel @vue/cli-service cross-env eslint minimist rollup rollup-plugin-babel rollup-plugin-terser rollup-plugin-vue vue vue-template-compiler

Vue Sparkles

A Vue component making things a little sparklier

npm bundle size npm GitHub issues NPM AppVeyor

What is Vue Sparkles?

Vue Sparkles is the Vue.JS variant of Josh W Comeau's animated sparkles for React. I took a couple of different approaches to the idea than he did. And I had to, since this is Vue and not React, of course :) It is essentially the same though.

It could look like this in action

Preview of a sparkling header

How to install it

easy, in your command line of choice:

npm install vue-sparkles --save

You have it installed. Now we just have to import it: in your main.js import the component like this

import VueSparkles from  'vue-sparkles';

And then we have to tell Vue to use it.

Vue.use(VueSparkles);

How to use Vue Sparkles?

Just wrap your soon-to-be sparkly element in a <VueSparkles> tag. That could look as follows

<VueSparkles><h1>What a great looking Header this is</h1></VueSparkles>

Or like so

<VueSparkles><img src="@/assets/img/some-image.png" alt="A sparkling image" /></VueSparkles>

You want to get more into customization? No problem!

Customization

Colors

You can pass a color prop to apply a custom color. Only an HSL style of colors work though. If you don't pass any color prop all sparkles will use the default of hsl(50deg, 100%, 50%)

<VueSparkles
  color="hsl(0deg, 100%, 50%)">
    <h1>What a great looking Header this is</h1>
</VueSparkles>

Alright, alright, I understand. You are thirsty now. You want more. No problem. Multiple Colors! To achieve that, I find it easiest to bind the color prop to a variable. Said var could look like this

color: [
    {
      h: '0',
      s: '100',
      l: '50'
    },
    {
      h: '50',
      s: '100',
      l: '50'
    }
  ]

This will give you a nice rainbowy effect of colors ranging from red to yellow for example. Notice how I only changed the hue and left the saturation and luminance the same. I would urge you to do the same if you don't intentionally aim for a different effect.

Paths

You can also use different paths. If you don't pass a path object, all sparkles will use the default star sparkle created by Josh Comeau. There is a restriction however! Since you are only changing the path, you won't be able to change stuff such as viewBox or stroke. That means you will be limited to filled SVGs, no outline icons here. Also, the viewBox is 0 0 160 160, so if your path doesn't respect that it is either cut on the viewBox borders or it will be so small you can't see it.

So, this should be pretty self-explanatory. For a single path you just have to pass the path-string through the path prop. That could look like this:

<VueSparkles
  path="...">
  <h1>What a great looking Header this is</h1>
</VueSparkles>

For multiple paths, just bind the path-prop to an array containing the paths.

Features

Changelog

1.0.3

Fix: Changed CSS to Skoped, since it made some SVGs outside the sparkle elements rotate

1.0.1 & 1.0.2

Hotfix: default path was the default color
Hotfix: when alternating between 2 paths, the random function would always return 0, instead of 0 or 1

1.0.0

Stable Release
Addition of ESLint

0.1.4

Custom Colors and Paths can now be passed through the color or path prop
- Single Color/Path as String
- Multiple Colors/Paths as Arrays

0.1.3

Build-Issues fixed, the module will now be found on import

Initial Release (0.1.0)

Initial Release: <VueSparkle> adds sparkles to Child Element passed through the slot.

Contribute

If you think this can be optimized in any way, please feel free to do so, this is open source after all :)

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

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

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

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

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

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

License

Determines if the project has defined a license.

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.

Score

2.4

/10

Last Scanned on 2025-07-07

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