An Interest In:
Web News this Week
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
Some of Our Sources
- Just Creative
- Joshua Blankenship
- TutsPlus - Design
- Vandelay Design
- Web Designer Depot
- FanExtra - PSD
- Web Design Ledger
- Freelance Switch
- Hashedout
- The Verge
Help Webnuz
Referal links:
How to create beautiful particles effect in Vue.js (2.x and 3.x)
I want those particle effects too!!
Did you see some fancy particles and you want something like that in your Vue.js project?
Let's see how to add them using tsParticles Vue.js 2.x or 3.x components.
Ready to use templates
Are you too lazy to read the post and want some working samples?
Here you are:
Vue JS 2.x (particles.vue)
- Vue 2.x tsParticles demo project
- Vue 2.x tsParticles CodeSandbox sample
- Vue 2.x tsParticles Authentication template
Vue JS 3.x (particles.vue3)
- Vue 3.x tsParticles demo project
- Vue 3.x tsParticles CodeSandbox sample
- Vue 3.x tsParticles Authentication template
Community projects
If you have some cool projects to share or some beautiful samples for newbies feel free to open a PR in the tsParticles templates repository
Let's start with the popular Vue.js 2.x version. The particles.vue npm package.
Vue.js 2.x
Installation
yarn add particles.vueUsage
import Particles from "particles.vue";// this adds the particles plugin to Vue.jsVue.use(Particles);Demo config
<template> <div id="app"> <!-- use this tag to add a particle container with an external configuration --> <Particles id="tsparticles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded" url="http://foo.bar/particles.json" /> <!-- or --> <!-- use this tag to add a particle container with an inline configuration --> <Particles id="tsparticles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded" :options="{ background: { color: { value: '#0d47a1' } }, fpsLimit: 60, interactivity: { detectsOn: 'canvas', events: { onClick: { enable: true, mode: 'push' }, onHover: { enable: true, mode: 'repulse' }, resize: true }, modes: { bubble: { distance: 400, duration: 2, opacity: 0.8, size: 40 }, push: { quantity: 4 }, repulse: { distance: 200, duration: 0.4 } } }, particles: { color: { value: '#ffffff' }, links: { color: '#ffffff', distance: 150, enable: true, opacity: 0.5, width: 1 }, collisions: { enable: true }, move: { direction: 'none', enable: true, outMode: 'bounce', random: false, speed: 6, straight: false }, number: { density: { enable: true, value_area: 800 }, value: 80 }, opacity: { value: 0.5 }, shape: { type: 'circle' }, size: { random: true, value: 5 } }, detectRetina: true }" /> </div></template>TypeScript errors
If you are using TypeScript and you have some errors while importing/using Particles plugin try adding the following import before the previous code:
declare module "particles.vue";Let's continue with the new Vue.js 3.x version. The particles.vue3 npm package.
Vue.js 3.x
Installation
yarn add particles.vue3Usage
import Particles from "particles.vue3";// this will add the particles plugin to your Vue.js appcreateApp(App).use(Particles)Demo config
<template> <div id="app"> <!-- use this tag to add a particle container with an external configuration --> <Particles id="tsparticles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded" url="http://foo.bar/particles.json" /> <!-- or --> <!-- use this tag to add a particle container with an inline configuration --> <Particles id="tsparticles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded" :options="{ background: { color: { value: '#0d47a1' } }, fpsLimit: 60, interactivity: { detectsOn: 'canvas', events: { onClick: { enable: true, mode: 'push' }, onHover: { enable: true, mode: 'repulse' }, resize: true }, modes: { bubble: { distance: 400, duration: 2, opacity: 0.8, size: 40 }, push: { quantity: 4 }, repulse: { distance: 200, duration: 0.4 } } }, particles: { color: { value: '#ffffff' }, links: { color: '#ffffff', distance: 150, enable: true, opacity: 0.5, width: 1 }, collisions: { enable: true }, move: { direction: 'none', enable: true, outMode: 'bounce', random: false, speed: 6, straight: false }, number: { density: { enable: true, value_area: 800 }, value: 80 }, opacity: { value: 0.5 }, shape: { type: 'circle' }, size: { random: true, value: 5 } }, detectRetina: true }" /> </div></template>TypeScript errors
If you are using TypeScript and you have some errors while importing/using Particles plugin try adding the following import before the previous code:
declare module "particles.vue3";Demos
The demo website is here
There's also a CodePen collection actively maintained and updated here
https://codepen.io/collection/DPOage
Related posts
If you like the project and you want to support that please leave a star on GitHub
matteobruni / tsparticles
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.
tsParticles - TypeScript Particles
A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready!
Particles.js converted in TypeScript, dependency free (*), improved with new cool features and various bugs fixed and it's actively maintained!
Do you want to use it on your website?
This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier.
You'll find the instructions below, with all the links you need, and don't be scared by TypeScript, it's just the source language.
The output files are just JavaScript.
CDNs and npm have all the sources you need in Javascript, a bundle browser ready (tsparticles.min.js) and all files splitted for import syntax.
If you are still interested some lines below there are some instructions for migrating from
Original Link: https://dev.to/matteobruni/how-to-create-beautiful-particles-effect-in-vue-js-2-x-and-3-x-27d8
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To