Develop Reference

Vue - vue3-particles Error - n.component is not a function Error during render

Hello :) I want to render particles from liblary text
Its totally basic example from this tutorial in link. But i Have this weird problem in console...
enter error image description here
I can Show you my packages and code from my component file
package.json (not all but show neccessaries :> )
"ts-node": "^10.9.1",
"tsparticles": "^2.8.0",
"typescript": "^4.9.4",
"vite": "^4.0.3",
"vue": "^3.2.33",
"vue-i18n": "^9.2.2",
"vue3-particles": "^2.8.0",
"yarn": "^1.22.19"
I tried do something like this:
Particles script in MagicParticles.vue
<script setup>
import styles from "./MagicParticles.module.scss";
import Particles from "vue3-particles";
import { loadFull } from "tsparticles";
const particlesInit = async (engine) => {
await loadFull(engine);
};
const particlesLoaded = async (container) => {
console.log("Particles container loaded", container);
};
const defaultParams = {
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,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
};
</script>
template
<template>
<div :class="styles.particlesBox">
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
url="http://foo.bar/particles.json"
/>
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
:options="defaultParams"
/>
</div>
</template>
enter error image description here

You should use the component like this:
import { ParticlesComponent } from 'vue3-particles';

Malformed or invalid request: Clarifai Api

import React from 'react';
import './App.css';
import Navigation from './components/Navigation/Navigation'
import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm'
import FaceRecognition from './components/FaceRecognition/FaceRecognition'
import Rank from './components/Rank/Rank'
import Logo from './components/Logo/Logo'
import Clarifai from 'clarifai'
import Particles from 'react-tsparticles';
const particlesOptions = {
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,
area: 500,
},
value: 100,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 2,
},
},
detectRetina: true,}
//clarifai API
const app = new Clarifai.App({
apiKey: 'a2013f7d2d54452d9592d7569ce4c5bd'
});
class App extends React.Component {
constructor (){
super();
this.state = {
input : '',
imageUrl : ''
}
}
onInputChange = (event) => {
this.setState({input: event.target.value})
}
onButtonSubmit = () => {
this.setState({imageUrl: this.state.input});
app.models.predict(Clarifai.FACE_DETECT_MODEL, this.state.input).then(
function(response) {
// do something with response
console.log(response);
},
function(err) {
// there was an error
}
);
}
render(){
return (
<div className="App">
<Particles className='particles'
id="tsparticles"
options={particlesOptions}
/>
<Navigation />
<Logo />
<Rank />
<ImageLinkForm onInputChange = {this.onInputChange} onButtonSubmit = {this.onButtonSubmit}/>
<FaceRecognition imageUrl = {this.state.imageUrl}/>
</div>
);}
}
export default App;
Whenever I am running this code, I am getting 'Invalid request' but if someone else is running the same code, there is no error and the code is working fine. I have tried changing multiple time but no solution found please help.
Response Error: {"status":{"code":11102,"description":"Invalid request","details":"Malformed or invalid request"}}
Github repo: https://github.com/devgobind/smart-recognition-brain

Apex charts, setting series data from array in state

In my react app, I'm getting results from pouchDB that I want to use as the data points in my series for apexCharts.
I'm getting the results and putting them in state, called maxCalories, and when logging in the console they are in this format:
So I want those 7 numbers (all with the index name of caloriesBurned to be my data in the series for the chart but I'm currently getting NaN on the graph.
Here's the full code, how can I set these to the correct format to use them in the chart data?
import React, { Component } from "react";
import Chart from "react-apexcharts";
import DB from '../../db';
import * as moment from 'moment';
class TrendsComponent extends Component {
constructor(props) {
super(props);
this.state = {
maxCalories: '',
calorieRecord: {
caloriesConsumed: '',
caloriesBurned: '',
createdAt: this.newestDate,
updatedAt: undefined
},
caloriesDB: new DB('calorie-records'),
calories: {},
calorieElements: null,
options: {
},
chart: {
toolbar: {
show:false
},
id: "basic-bar"
},
xaxis: {
categories: ['3/20', '3/21', '3/22', '3/23', '3/24', '3/25','3/26']
}
},
series: [
{
name: "Trend (tracked)",
data: {this.maxCalories}
}
]
};
}
componentDidMount(){
this.setMax();
}
setMax = () => {
this.state.caloriesDB.db.find({
selector: {
$and: [
{_id: {"$gte": null}},
{caloriesBurned: {$exists: true}},
{createdAt: {$exists: true}}
]
},
fields: ['caloriesBurned', 'createdAt'],
sort: [{'_id':'desc'}],
limit: 7
}).then(result => {
console.log('max');
console.log(result);
const newDocs = result.docs;
this.setState({
maxCalories: newDocs.map(docs => docs)
});
console.log('maxCalories');
console.log(this.state.maxCalories);
}).catch((err) =>{
console.log(err);
});
}
render() {
return (
<div className="mixed-chart">
<Chart
options={this.state.options}
series={this.state.series}
type="area"
stacked="true"
width="700"
/>
</div>
);
}
}
export default TrendsComponent;

I had the same problem in my project. And I spent a lot of time in looking for solution. So here what I get:
const FinacialResultChart = (props) => {
const options = {
chart: {
toolbar: {
show: false
},
animations: {
enabled: false
}
},
stroke: {
curve: "smooth",
dashArray: [0, 8],
width: [4, 2]
},
grid: {
borderColor: props.labelColor
},
legend: {
show: false
},
colors: [props.dangerLight, props.strokeColor],
fill: {
type: "gradient",
gradient: {
shade: "dark",
inverseColors: false,
gradientToColors: [props.primary, props.strokeColor],
shadeIntensity: 1,
type: "horizontal",
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100]
}
},
markers: {
size: 0,
hover: {
size: 5
}
},
xaxis: {
labels: {
style: {
colors: props.strokeColor
}
},
axisTicks: {
show: false
},
categories: [
"Январь",
"Февраль",
"Март",
"Апрель",
"Май",
"Июнь",
"Июль",
"Август",
"Сентябрь",
"Октябрь",
"Ноябрь",
"Декабрь"
],
axisBorder: {
show: false
},
tickPlacement: "on"
},
yaxis: {
tickAmount: 5,
labels: {
style: {
color: props.strokeColor
}
}
},
tooltip: {
x: { show: false }
}
}
const data = [
{
name: "Итоговый результат",
data: props.userData.traidingMonth
}
]
return (
<Chart
options={options}
series={data}
type="line"
height={280}
/>
)
}
export default FinacialResultChart
So you need to change your class to const, and push all your props (api data for example) into your children chart component. In chart options you can get the chart data with props.data

Adding tsParticles as background

I'm trying to use tsParticles as a background to a login page but the mouse event doesn't work when I'm on the login div.
How can I make it work?
Here's my configuration
tsParticles.load('tsparticles', {
background: {
color: '#000000'
},
particles: {
color: {
value: '#CF5C36'
},
opacity: {
value: 0.5
},
lineLinked: {
color: {
value: '#EFC88B'
},
consent: true
}
},
interactivity: {
events: {
onHover: {
mode: ['grab', 'bubble'],
enable: true
}
},
modes: {
grab: {
distance: 200
},
bubble: {
size: 10
}
}
},
preset: 'basic'
});
Here's a sample fiddle of the issue: https://jsfiddle.net/jmfhk0xb/

In the interactivity section, you need to add detect_on: 'window'.
interactivity: {
detect_on: 'window',
events: {
onHover: {
mode: ['grab', 'bubble'],
enable: true
}
},
modes: {
grab: {
distance: 200
},
bubble: {
size: 10
}
}
},

Vue Router interfering with $nextTick (particles.js)?

This is my first post. My issue is the following, I have a vuejs app that uses vue-router and one of the components in the vue uses particle.js. I was successfully able to integrate particle.js into my component using $nextTick, however when I added nested routes to the parent component of this said component, particles.js stopped working with no error. The main app is layered as follows:
App.vue:
<template>
<div id="app">
<nav-bar />
<Title />
<router-view />
</div>
</template>
Particle.js is running in the 'title' component.
which is as follows:
<template>
<div id="particles-js"></div>
</template>
<script>
export default {
name: "Title",
mounted() {
require("particles.js");
this.$nextTick(() => {
this.initParticlesJS();
});
},
methods: {
initParticlesJS() {
/* eslint-disable */
particlesJS("particles-js", {
particles: {
number: {
value: 8,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#2d3bff"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#2d3bff"
},
polygon: {
nb_sides: 5
},
image: {
src: "img/github.svg",
width: 100,
height: 100
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 10,
random: true,
anim: {
enable: false,
speed: 80,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 300,
color: "#2d3bff",
opacity: 0.8,
width: 2
},
move: {
enable: true,
speed: 12,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: false,
mode: "repulse"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 800,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 800,
size: 80,
duration: 2,
opacity: 0.8,
speed: 3
},
repulse: {
distance: 400,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true
});
}
}
};
</script>
<style scoped>
#particles-js {
position: absolute;
z-index: 0;
height: 100%;
width: 100%;
}
</style>
I think this might be an issue with the DOM or with the way components are rendered using nested routing because when I remove the from the main component the particles work fine and when I add it again it doesn't seem to be running. But I'm afraid that it's a little out of my depth for something that was supposed to be a simple project.
Update:
I still don't know how to diagnose this. However, I tried using different routes and when I go into a route that doesn't exist, for example: localhost:8080/#/route_that_doesnt_exist the particles will show up, meaning that it only doesn't work when the page is rendering one of the nested routes. I hope this helps.