https://github.com/oxoyo/x-particles-vue-demo

A Vue.js particles plugin base on particles.js
https://github.com/oxoyo/x-particles-vue-demo

particles vue-particles

Last synced: about 2 months ago
JSON representation

A Vue.js particles plugin base on particles.js

• Host: GitHub
• URL: https://github.com/oxoyo/x-particles-vue-demo
• Owner: OXOYO
• Created: 2018-03-23T03:50:28.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-31T02:46:51.000Z (over 6 years ago)
• Last Synced: 2025-01-29T16:44:02.706Z (4 months ago)
• Topics: particles, vue-particles
• Language: JavaScript
• Homepage: http://oxoyo.co/X-Particles-Vue-Demo/
• Size: 334 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# x-particles-vue

[![](https://img.shields.io/travis/iview/iview.svg?style=flat-square)](https://travis-ci.org/x-particles/x-particles)

[![Version](https://img.shields.io/npm/v/x-particles.svg)](https://www.npmjs.com/package/x-particles)

[![License](https://img.shields.io/npm/l/x-particles.svg)](https://www.npmjs.com/package/x-particles)

[![NPM downloads](http://img.shields.io/npm/dm/x-particles.svg?style=flat-square)](https://npmjs.org/package/x-particles)

[![Downloads](https://img.shields.io/npm/dt/x-particles.svg)](https://www.npmjs.com/package/x-particles)

![JS gzip size](http://img.badgesize.io/https://unpkg.com/x-particles/dist/XParticles.js?compression=gzip&label=gzip%20size:%20JS&style=flat-square)

> A Vue.js particles plugin base on [particles.js](https://github.com/VincentGarreau/particles.js) .

## Example

``` bash

# git clone https://github.com/OXOYO/X-Particles-Vue-Demo.git

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

```

## Usage

``` bash

## Packages install

npm install x-particles --save

## main.js

import XParticles from 'x-particles'

Vue.use(XParticles)

## App.vue

  .particles-background {

    background: #383838;

    height: 100%;

    width: 100%;

  }

  


    

  


  import defConfig from './config/default.js'

  //  import defConfig from './config/nasa.js'

  //  import defConfig from './config/bubble.js'

  //  import defConfig from './config/snow.js'

    export default {

      name: 'app',

      data () {

        return {

          config: {}

        }

      },

      created: function () {

        let _t = this

        _t.config = defConfig

      }

    }

<script>

```

## Preview

[Demo](https://oxoyo.github.io/X-Particles-Vue-Demo/)

![XParticles](https://raw.githubusercontent.com/OXOYO/X-Particles-Vue/master/docs/images/img_001.png "XParticles")

## Links

- [particles.js](https://github.com/VincentGarreau/particles.js)

- [vue](https://github.com/vuejs/vue)

## License

[MIT](http://opensource.org/licenses/MIT)