Reputation: 10887
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
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