creotip / vue-particles Goto Github PK

When I

import Vue from 'vue';
import VueParticles from 'vue-particles';
Vue.use(VueParticles);

Before change App.vue,

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
};
</script>

<style>
</style>

I npm run dev, the Chrome console give me: [Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

And also cannot load vue-particles after I follow your website guide.

I use

"vue": "^2.2.6",
"vue-router": "^2.3.1",
"vue-particles": "^1.0.2",

Got no clue on this error...

You should add a package.json files entry to not install the entire 2MB payload:

• https://docs.npmjs.com/files/package.json#files

vue-element-admin use vue-particles ,Error reporting in ie11 and below browsers
https://blog.csdn.net/sinat_41200024/article/details/88662778，I tried，not work!

Value updated, but style parcticles don`t update?

<template>	
	<div class="row wrap-banner">
		<vue-particles 	
			:particlesNumber="pNum"			
			:moveSpeed="mSpeed"		
			>				
		</vue-particles>
		<div class="col-md-7 skills-content ">
				<h1>Professional skills</h1>
				<ul>
					<li v-for="skill in skills">{{ skill }}</li>
				</ul>
		</div>	
		<div class="col-md-5">
			<form class="p-4">
				<div class="form-row">
					<div class="col-12 text-center">
						<h4>Particles options</h4>
					</div>
					<div class="form-group col-12 col-md-6">
						<label for="pNum">pNum</label>
						<input type="number" class="form-control myInput" 						 
						name="pNum"
						v-model.number="pNum"						
						/>
						<p>{{pNum}}</p>
					</div>
					<div class="form-group col-12 col-md-6">
						<label for="mSpeed">mSpeed</label>
						<input type="number" class="form-control myInput" 						 
						name="mSpeed"
						v-model.number="mSpeed"						
						/>
						<p>{{mSpeed}}</p>
					</div>
					<div class="col-md-12">
						<button class="btn btn-pink" type="button">Apply</button>
					</div>
				</div>
			</form>
		</div>		
	</div>		
</template>
<script>
import {mapGetters} from 'vuex';
  export default { 
  	data(){
  		return {
  			pNum: 150,
  		    mSpeed: 4	    
  		}
  	},
  	 computed: {
	      ...mapGetters('skills', {
	        skills: 'skills',
	      }) 
    }
  }
</script>	

I want to make it fullscreen, how to do that?

UPD. I was able to set it fullscreen by adding this

.particles-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
}

#particles-js {
  width: 100%;
  height: 100vh;
}

But it doesn't seems like a native solution.

from UglifyJs\nUnexpected token: punc (() [node_modules/vue-particles/src/vue-particles/vue-particles.vue:87,0]

Please, consider making an edit to your README.md
It doesn't work with SSR, also tested with nuxt.
The following doesn't work:

plugins: [ '~plugins/vue-particles` ]

error:

Nuxt.js Error:
/nuxt-website/node_modules/vue-particles/src/vue-particles/index.js:2
import particles from './vue-particles.vue'
^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at r (/nuxt-website/node_modules/vue-server-renderer/build.js:6964:16)
    at Object.<anonymous> (webpack:/external "vue-particles":1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap de794b84f45fea3bc548:25:0)
    at Object.module.exports.Object.defineProperty.value (server-bundle.js:2066:72)
    at __webpack_require__ (webpack:/webpack/bootstrap de794b84f45fea3bc548:25:0)
    at Object.module.exports.module.exports.list (.nuxt/index.js:83:0)
    at __webpack_require__ (webpack:/webpack/bootstrap de794b84f45fea3bc548:25:0)

However, it passes when ssr: false is set:

plugins: [
    { src: '~plugins/vue-particles`, ssr: false }
]

But doesn't work anyway.
File ~plugins/vue-particles:

import Vue from 'vue'
import VueParticles from 'vue-particles'

Vue.use(VueParticles);

Using created vue-particles component inside ~pages/index.vue:

<template lang='pug'>
.home
    vue-particles(color="#ffffff", :particleOpacity="0.7",
        linesColor="#ffffff",
        :particlesNumber="80",
        shapeType="circle",
        :particleSize="5",
        :linesWidth="2",
        :lineLinked="true",
        :lineOpacity="0.4",
        :linesDistance="150",
        :moveSpeed="3",
        :hoverEffect="true",
        hoverMode="grab",
        :clickEffect="true",
        clickMode="push"
        )
</template>

Then, gives the following error associated with the different SSR and client-side:

The project has no components in ~components folder and a single page component, which is ~pages/index.vue.
Here is a list of dependencies package.json

  "dependencies": {
    "nuxt": "latest",
    "vue-particles": "^1.0.5",
    "axios": "^0.16.1"
  },
  "devDependencies": {
    "node-sass": "^4.5.0",
    "pug": "^2.0.0-beta9",
    "pug-loader": "^2.3.0",
    "sass-loader": "^6.0.3"
  }

Hi,
I'm trying to open my application in IE and SAFARI(iphone 4s) and dont open, already cleaned every other errors, see topic:
https://forum.vuejs.org/t/blank-page-after-build-on-ie-and-iphone/14801/19

@edit
Try to open the DEMO page on IE -> http://vue-particles.netlify.com/ It's doesnt open

/node_modules/vue-particles/src/vue-particles/index.js:2 Uncaught SyntaxError: Unexpected token import
at createScript (vm.js:74)
at Object.runInThisContext (vm.js:116)
at Module._compile (module.js:533)
at Object.Module._extensions..js (module.js:580)
at Module.load (module.js:503)
at tryModuleLoad (module.js:466)
at Function.Module._load (module.js:458)
at Module.require (module.js:513)
at require (internal/module.js:11)
at eval (external "vue-particles"?c47c:1)
createScript @ vm.js:74
runInThisContext @ vm.js:116
Module._compile @ module.js:533
Module._extensions..js @ module.js:580
Module.load @ module.js:503
tryModuleLoad @ module.js:466
Module._load @ module.js:458
Module.require @ module.js:513
require @ internal/module.js:11
(anonymous) @ external "vue-particles"?c47c:1
(anonymous) @ renderer.js:1055
webpack_require @ renderer.js:680
fn @ renderer.js:90
(anonymous) @ main.js?3b76:1
(anonymous) @ renderer.js:900
webpack_require @ renderer.js:680
fn @ renderer.js:90
(anonymous) @ renderer.js:817
webpack_require @ renderer.js:680
(anonymous) @ renderer.js:726
(anonymous) @ renderer.js:729

After importing your components, my project runs very slowly because of what!

在360兼容模式下页面一片空白，我目前是按照这个方法传送门来处理的，亲测可行。你能不能修复一下这个bug，更新版本

Giving error in console from example in https://vue-particles.netlify.com/

Possibly a typescript issue?

Hi,

When the particlesNumber param is updated during the vue rendering, the number of particles don't update. What is the way to do this please?

<template>
  <div id="myComponent">
    <vue-particles :particlesNumber="count"
      color="#FFF" shapeType="circle" :particleOpacity="0.7" :particleSize="5" :moveSpeed="0.5"
      linesColor="#FFF" :linesWidth="1" :lineLinked="true" :lineOpacity="0.2" :linesDistance="150"
      :hoverEffect="false" hoverMode="grab" :clickEffect="false" clickMode="push"
    >
    </vue-particles>
  </div>
</template>

<script>
  export default {
    name: 'myComponent',
    props: ['count']
  }
</script>

Thks

Why is template vue particles not being detected?

Thanks for this vue plugin. It's helpful, but can you fix memory (and performance) leaks?
When it's used in landing page everything is good, but if there's a router...

In fact, #20 fix performance problem, but it still has too many EventListeners on window.

(I know, it's not your error, it's vanilla particles.js has too many errors and anti-patterns)

npm run build failure.
Unexpected token: punc (() [./node_modules/vue-particles/src/vue-particles/index.js:6,0][assets/js/vendor.7b1bf9c1b644c77f2e64.js:58609,12]

使用后 运行正常，打包的时候报错。

This is a great component, thank you for making it.

Doesn't seem to work in IE 11?

Any elements I use between these tags does not get displayed.

For example:

<vue-particle>
<p>This paragrapgh does not display</p>
</vue-particle>

How to run vue-particles with typescript?

Got no luck below:

<template>
    <div id="app">
           <vue-particles color="#dedede">
                      <h1>Hello World</h1>
          </vue-particles>
    </div>
 </template>

Any help?

Hello，i find that you did not actually distroy particles when component vue-particles was destroyed.

So, it may cause Memory Leak, does it ?

`[Vue warn]: Failed to mount component: template or render function not defined.

found in

--->
`

I can't make it work. Tried to follow the webpack config workaround from #7 but it doesn't work. And what I'm getting is actually a different error from the one they were discussing on #7.

Hey guys idk if it is an issue or I'm just to stupid to adjust the height so yea my question is what is the best way to adjust the height?
Should i put the Particles Component in a own div container or should i directly adjust it i mean i tried to change the height at the .particles-js-canvas-el class and at the vue-particles class...
In my opinion i need to change the height at the .particles-js-canvas-el class cause it works when i change it in the DevTools of firefox and chrome!
Or should i do it via js?

Sry for the long text :d

Im having hard to play any documentation?

Hello, Can you please update License for usage?

Hello!
The first i thank you so much to coder Creotip
I have a issue:
It not work with vue router
Please view video to understand more...
https://www.youtube.com/watch?v=zzbFhnatQoo

My code
<vue-particles color="#ffffff" :particleOpacity="2" :particlesNumber="35" shapeType="circle" :particleSize="1" linesColor="#ffffff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.6" :linesDistance="150" :moveSpeed="4" :hoverEffect="true" hoverMode="grab" > </vue-particles>

Thank you so much

I have been trying to use vue-particles with nuxt.js, but it doesn't work. Found this issue nuxt/nuxt#673. Have the same exact errors but cannot fix no matter what.

Nuxt.js Error:

import particles from './vue-particles.vue'
^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at r (/home/zaven/Projects/www/node_modules/vue-server-renderer/build.js:5812:16)
    at Object.<anonymous> (webpack:/external "vue-particles":1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 0c43d74d43f41eb48834:25:0)
    at Object.module.exports.Object.defineProperty.value (server-bundle.js:1542:72)
    at __webpack_require__ (webpack:/webpack/bootstrap 0c43d74d43f41eb48834:25:0)
    at Object.module.exports.__webpack_exports__.a (.nuxt/index.js:27:14)
    at __webpack_require__ (webpack:/webpack/bootstrap 0c43d74d43f41eb48834:25:0)

It seems like @Atinux's PR a4c2903 should have fixed the problem, but the error message is still there

This may be a duplicate of #28 as the error is still Unexpected token import

This is using Nuxt 1.4.0

I got this error when I run npm run build with webpack starter

ERROR in static/js/vendor.45aff846fcfadbed7d10.js from UglifyJs
Unexpected token: punc (() [./~/vue-particles/src/vue-particles/index.js:6,0][static/js/vendor.45aff846fcfadbed7d10.js:33150,12]

ERROR in /usr/lib//cooking-cli//babel-loader/lib!.//vue-loader/lib/selector.js?type=script&index=0!.//vue-particles/src/vue-particles/vue-particles.vue
Module build failed: Error: Couldn't find preset "env" relative to directory "..../node_modules/vue-particles"
at /usr/lib/node_modules/cooking-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (native)
at OptionManager.resolvePresets (/usr/lib/node_modules/cooking-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/usr/lib/node_modules/cooking-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/usr/lib/node_modules/cooking-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/usr/lib/node_modules/cooking-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/usr/lib/node_modules/cooking-cli/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/usr/lib/node_modules/cooking-cli/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/usr/lib/node_modules/cooking-cli/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/usr/lib/node_modules/cooking-cli/node_modules/babel-loader/lib/index.js:46:20)
at Object.module.exports (/usr/lib/node_modules/cooking-cli/node_modules/babel-loader/lib/index.js:163:20)
@ .//vue-particles/src/vue-particles/vue-particles.vue 4:2-100
@ .//vue-particles/src/vue-particles/index.js
@ ./src/main.js
@ multi webpack-dev-server/client?http://0.0.0.0:4040/ webpack/hot/dev-server webpack-hud babel-polyfill ./src/main.js
webpack: Failed to compile.

hi,thx.

i have a question!

How to change the color after start ?

I think every once in a while to change color.

Hi!

First, thanks for the amazing work. :)

It would be amazing if we could use "diamond" (like this: ⯁) as an option for shapeType. Would it be possible to implement it?

Cheers,
Charlie

Got no clue on this error...

I tried unpkg.com/vue-particles, it doesn't work.
The only cdn online I've found is https://www.jsdelivr.com/package/npm/vue-particles , it doesn't work.
How could I use this amazing particles by CDN?

I wish to modify particle direction which is in move.direction

any help will be appreciated...

例如单页中，登录然后到首页，登录页含有动画效果，来回切换数次感觉像是动画实例化了很多次然后导致JS异常的慢

this package doesn't work as intended .
with current instructions on how to get it working , this wont work.

first issue is babel transform-runtime.

ERROR in .//babel-loader/lib!.//vue-loader/lib/selector.js?type=script&index=0!./~/vue-particles/src/vue-particles/vue-particles.vue
Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "/Users/itayjoseph/work/devcraft-vue/node_modules/vue-particles/.babelrc" at 0

after you add transfrom-runtime to your babelrc, you will most likely get

RROR in .//babel-loader/lib!.//vue-loader/lib/selector.js?type=script&index=0!./~/vue-particles/src/vue-particles/vue-particles.vue
Module build failed: Error: Couldn't find preset "env" relative to directory

this might have worked on previous versions of vue or vue-cli generated boilerplate , but currently it's not.

Please provide proper instructions on how to use this package without any issues.

when i use clickMode is push， then i click all the time ，the canvas will always add no limit ,and the comuter will stuck

Hi there,

I got this package from npm and found source code difference.

From NPM:

Your code:
Source

Project/packages does work, while running under development local environment. However, crashes under production and or static generated files.

Here I am getting:

ERROR in 2.nuxt.bundle.a209f5cd138dc09bbe9d.js from UglifyJs
Unexpected token punc «(», expected punc «:» [./~/vue-particles/src/vue-particles/index.js:6,0][2.nuxt.bundle.a209f5cd138dc09bbe9d.js:1998,12]
Error: Webpack build exited with errors
at C:\Users\mpati\Desktop\insurance-scanner\node_modules\nuxt\dist\nuxt.js:905:44
at C:\Users\mpati\Desktop\insurance-scanner\node_modules\webpack\lib\Compiler.js:272:15
at Compiler.emitRecords (C:\Users\mpati\Desktop\insurance-scanner\node_modules\webpack\lib\Compiler.js:367:37)
at C:\Users\mpati\Desktop\insurance-scanner\node_modules\webpack\lib\Compiler.js:265:12
at C:\Users\mpati\Desktop\insurance-scanner\node_modules\webpack\lib\Compiler.js:360:11
at next (C:\Users\mpati\Desktop\insurance-scanner\node_modules\tapable\lib\Tapable.js:154:11)
at Compiler.compiler.plugin (C:\Users\mpati\Desktop\insurance-scanner\node_modules\webpack\lib\performance\SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (C:\Users\mpati\Desktop\insurance-scanner\node_modules\tapable\lib\Tapable.js:158:13)
at Compiler.afterEmit (C:\Users\mpati\Desktop\insurance-scanner\node_modules\webpack\lib\Compiler.js:357:8)
at Compiler. (C:\Users\mpati\Desktop\insurance-scanner\node_modules\webpack\lib\Compiler.js:352:14)
at C:\Users\mpati\Desktop\insurance-scanner\node_modules\async\dist\async.js:421:16
at iteratorCallback (C:\Users\mpati\Desktop\insurance-scanner\node_modules\async\dist\async.js:998:13)
at C:\Users\mpati\Desktop\insurance-scanner\node_modules\async\dist\async.js:906:16
at C:\Users\mpati\Desktop\insurance-scanner\node_modules\graceful-fs\graceful-fs.js:43:10
at FSReqWrap.oncomplete (fs.js:123:15)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "generate"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] generate: nuxt generate
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] generate script 'nuxt generate'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the insurance-ui package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! nuxt generate
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs insurance-ui
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls insurance-ui
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\mpati\Desktop\insurance-scanner\npm-debug.log

cannot open demo page from android, and run very slow using default properties in my own page

Hi guys i have this problem
./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/vue-particles/src/vue-particles/vue-particles.vue
Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "C:\Users\USUARIO\Desktop\Lenguajes\Vue.js\VueTask\norther-task\node_modules\vue-particles\.babelrc" at 0, attempted to resolve relative to "C:\Users\USUARIO\Desktop\Lenguajes\Vue.js\VueTask\norther-task\node_modules\vue-particles"
at C:\Users\USUARIO\Desktop\Lenguajes\Vue.js\VueTask\norther-task\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17
at Array.map ()
at Function.normalisePlugins (C:\Users\USUARIO\Desktop\Lenguajes\Vue.js\VueTask\norther-task\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
at OptionManager.mergeOptions (C:\Users\USUARIO\Desktop\Lenguajes\Vue.js\VueTask\norther-task\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36)
at OptionManager.init (C:\Users\USUARIO\Desktop\Lenguajes\Vue.js\VueTask\norther-task\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (C:\Users\USUARIO\Desktop\Lenguajes\Vue.js\VueTask\norther-task\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (C:\Users\USUARIO\Desktop\Lenguajes\Vue.js\VueTask\norther-task\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (C:\Users\USUARIO\Desktop\Lenguajes\Vue.js\VueTask\norther-task\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (C:\Users\USUARIO\Desktop\Lenguajes\Vue.js\VueTask\norther-task\node_modules\babel-loader\lib\index.js:50:20)
at Object.module.exports (C:\Users\USUARIO\Desktop\Lenguajes\Vue.js\VueTask\norther-task\node_modules\babel-loader\lib\index.js:175:20)
@ ./node_modules/vue-particles/src/vue-particles/vue-particles.vue 4:0-103 5:0-116
@ ./node_modules/vue-particles/src/vue-particles/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

follow the steps

vue init webpack test
cd test
yarn install
yarn add vue-particles

edit main.js

import VueParticles from 'vue-particles'
Vue.use(VueParticles)

edit Hello.vue

<vue-particles color="#dedede"></vue-particles>

run npm run build

ERROR in static/js/vendor.5849ac9944c6d70a847c.js from UglifyJs
Unexpected token: punc (() [./~/vue-particles/src/vue-particles/index.js:6,0][static/js/vendor.5849ac9944c6d70a847c.js:111,12]

我在自己写的demo中将id改为动态的,可以创建多个粒子效果
在vue-particles中更改: