# vue-niege

> _Let it snow on your Vue applications!_

Latest version **0.1.1** (published 2018-11-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-niege
pnpm add vue-niege
yarn add vue-niege
bun add vue-niege
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2018-11-24 |
| First published | 2018-11-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 47.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30 |
| Author | P3trur0 |
| Maintainers | p3trur0 |
| Keywords | vue, vuejs, vue2, snow, christmas, canvas, component |

## Links

- npm: https://www.npmjs.com/package/vue-niege
- Repository: https://github.com/P3trur0/vue-niege
- Homepage: https://github.com/P3trur0/vue-niege/
- Issues: https://github.com/P3trur0/vue-niege/issues
- npm.io page: https://npm.io/package/vue-niege

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2018-11-24
- 0.1.0 — 2018-11-24

## README

# vue-niege

_Let it snow on your Vue applications!_

<p align="center">
  <img src="https://github.com/P3trur0/vue-niege/blob/master/static/logo.png?raw=true" alt="Vue Niege"/>
</p>

---

Single File Vue Component for _lazy_ snow storms generation. Come on, let's make your Vue applications joyful for Christmas time! 🎄 🎅

### Installation

You can install this component using npm:

```bash
npm install --save vue-niege
```

### Usage

Once installed, it is easy to use it. 

##### Importing the component

First, you need to import `vue-niege` in your files. You can do that in different ways.  
For example, it can be imported into a build process for use in full-fledged Vue applications:

```js
import Snow from 'vue-niege';

export default {
  components: {
    Snow,
  },
  // rest of the component
}
```

Alternatively, you can import `vue-niege` via `<script>` tag in the browser directly:

```html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-niege"></script>
```

##### Using the component

Once imported, you can use your component as follows:

```js
<Snow/>
```

This is the minimal setup to add a snowing canvas in your application.

### Properties

If you need to customize the snow behavior, you can use one of the following optional properties.

| **Properties** | **Default** | **Description**                                                                        | **Type**         |
|----------------|-------------|----------------------------------------------------------------------------------------|------------------|
| **active**         | `true`        | _provides dynamic display to the canvas: it is displayed only where this prop is true_ | Boolean          |
| **color**          | `#FFFFFF`     | _given a master HEX color, it defines a color pattern of four values for the snow. This property must be in expressed as HEX color (e.g.: `#050484`)_                                        | String           |
| **zIndex**         | `1`           | _defines the z-index position of the canvas in the DOM._                                                | Number           |
| **swing**          | `0`           | _applies a swing effect to each snowflake. By default no swinging is applied._         | Number           |
| **wind**           | `1`           | _defines the horizontal wind effect. The effect blows from right for values greater than 0, from left for values less than 0._ | Number           |
| **speed**          | `m`           | _defines the speed of the falling snow. The available values are `h` for high speed, `m` for medium speed, `l` for low speed._        | String           |

For example, the following:

```js
 <Snow 
 :active='true'  //e.g.: add a condition to display the canvas only if current date is in the Advent range.
 :zIndex='2'
 :wind='1' 
 :swing='3' 
 :speed='h' 
 color="#ffff00"/>
```

produces the following effect:

![Vue de toits](https://github.com/P3trur0/vue-niege/blob/master/static/vue-niege.gif?raw=true "Vue de toits")

### Contributing

This component can be improved both in features and performances. Please, help me in doing it better 🎅

### Credits

The inspiration for the component comes from [this](https://github.com/HermannBjorgvin/SnowJs) and [this](https://github.com/Fuxy526/vue-snowf), so their authors deserve big kudos.  
The inspiration for the component name comes from the above impressionist painting by [Gustave Caillebotte](https://en.wikipedia.org/wiki/Gustave_Caillebotte), titled **Vue de toits (Effet de neige)**.

---
_Source: https://npm.io/package/vue-niege · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._