Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to change Particles Background Image with Vuejs3 ?

See original GitHub issue

/* DO NOT DELETE THE TEMPLATE BELOW, you can safely delete this line */

Which version are you using? ^1.12.2

You can checkout latest version here

[ x] Yes
No

Which library are you using?

Vanilla JS (tsparticles)
React (react-tsparticles)
Vue.js 2.x (particles.vue)
[x ] Vue.js 3.x (particles.vue3)
Angular (ng-particles)
Svelte (svelte-particles)
Preact (preact-particles)
Inferno (inferno-particles)
jQuery (jquery-particles)

tsParticles Configuration

<template>
<div class="relative overflow-hidden h-3/4">
  <Particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      :options="{
      background: {
          color: {
          value: '#111827',
          },
      },
      fullScreen: {
          enable: false
      },
      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: 2,
          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>

<script>
import { ref } from 'vue'

export default {

  setup(){

      const showMenuMobile = ref(false)



      return {
          showMenuMobile
      }
  }

}
</script>

<style scoped>
</style>

Sorry for my noob question, but i have search around but have not found yet

Issue Analytics

State:
Created 2 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

superdiazzzcommented, Jun 27, 2021

@matteobruni thank you, it works

0reactions

matteobrunicommented, Jun 27, 2021

image: url('https://particles.js.org/images/background3.jpg')

this should be fixed like this:

image: 'url(https://particles.js.org/images/background3.jpg)'

url is not a valid javascript function, this is why it’s not working

Top Results From Across the Web

How to place elements on a Particle JS background in Vue JS 3

You have two options: If you want the particles full screen you can enable the full screen options with a lower z index...

particles.vue3 - npm

Official tsParticles Vue.js 3.x Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated ...

Particles.vue3 released! Particles animations for Vue.js 3.x

vue3 is the new tsParticles component for Vue.js 3.x since 2.x components are not compatible. You can now have cool particle animations easily ......

How to place elements on a Particle JS background in Vue JS ...

If particles are behind elements they won't interact when mouse is hover another element so I recommend setting interactivity.detectsOn to "window" value.

lindelof/particles-bg-vue - GitHub

A vue.js particles animation background component. Contribute to lindelof/particles-bg-vue development by creating an account on GitHub.