creotip / vue-particles Goto Github PK
View Code? Open in Web Editor NEWVue.js component for particles backgrounds ✨
Home Page: http://vue-particles.netlify.com/
Vue.js component for particles backgrounds ✨
Home Page: http://vue-particles.netlify.com/
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.
How to run vue-particles with typescript?
Hello,i find that you did not actually distroy particles when component vue-particles was destroyed.
So, it may cause Memory Leak, does it ?
在360兼容模式下页面一片空白,我目前是按照这个方法传送门来处理的,亲测可行。你能不能修复一下这个bug,更新版本
Got no luck below:
<template>
<div id="app">
<vue-particles color="#dedede">
<h1>Hello World</h1>
</vue-particles>
</div>
</template>
Any help?
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>
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)
Im having hard to play any documentation?
Why is template vue particles not being detected?
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?
/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
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
使用后 运行正常,打包的时候报错。
from UglifyJs\nUnexpected token: punc (() [node_modules/vue-particles/src/vue-particles/vue-particles.vue:87,0]
when i use clickMode is push, then i click all the time ,the canvas will always add no limit ,and the comuter will stuck
This is a great component, thank you for making it.
Doesn't seem to work in IE 11?
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]
例如单页中,登录然后到首页,登录页含有动画效果,来回切换数次感觉像是动画实例化了很多次然后导致JS异常的慢
This may be a duplicate of #28 as the error is still Unexpected token import
This is using Nuxt 1.4.0
Giving error in console from example in https://vue-particles.netlify.com/
Possibly a typescript issue?
After importing your components, my project runs very slowly because of what!
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!
Hello, Can you please update License for usage?
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.
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
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"
}
cannot open demo page from android, and run very slow using default properties in my own page
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",
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
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.
You should add a package.json
files
entry to not install the entire 2MB payload:
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
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
I wish to modify particle direction which is in move.direction
any help will be appreciated...
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
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]
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
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
Any elements I use between these tags does not get displayed.
For example:
<vue-particle>
<p>This paragrapgh does not display</p>
</vue-particle>
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]
hi,thx.
i have a question!
How to change the color after start ?
I think every once in a while to change color.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.