Joe Scotto
Joe Scotto

Reputation: 10887

TSParticles loads background but not particles

I'm trying to show some simple particles on a fullscreen background but only the background blue color is showing. I have no errors in my console. I'm using Laravel Vue with TS / vue-class-component.

ExampleComponent.vue

<template>
    <Particles id="tsparticles"
               :options="{
      fpsLimit: 60,
      background: {
            color: {
                value: '#0d47a1'
            }
        },
      particles: {
        color: {
          value: '#000'
        },
        move: {
          enable: true
        },
        links: {
          enable: true,
          color: '#000'
        }
      }
    }" />

</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

@Component
export default class ExampleComponent extends Vue {}
</script> 

app.ts

declare module "particles.vue";

import "./bootstrap";
import Vue from "vue";
import ExampleComponent from "./components/ExampleComponent.vue";

import Particles from "particles.vue";

Vue.use(Particles);

Vue.component("example", ExampleComponent);

new Vue({
    el: "#app",
});

Upvotes: 1

Views: 640

Answers (1)

muyah
muyah

Reputation: 176

try adding all the properties

 <Particles
                id="tsparticles"
                :particlesInit="particlesInit"
                :particlesLoaded="particlesLoaded"
                :options="{
                    background: {
                        color: {
                            value: '#0d47a1'
                        }
                    },
                    fpsLimit: 120,
                    interactivity: {
                        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,
                            outModes: {
                                default: 'bounce'
                            },
                            random: false,
                            speed: 6,
                            straight: false
                        },
                        number: {
                            density: {
                                enable: true,
                                area: 800
                            },
                            value: 80
                        },
                        opacity: {
                            value: 0.5
                        },
                        shape: {
                            type: 'circle'
                        },
                        size: {
                            value: { min: 1, max: 5 },
                        }
                    },
                    detectRetina: true
                }"
        />



Upvotes: 1

Related Questions