Skip to content

Commit 8302100

Browse files
matteobrunimatteobruni
committed
build: updated deps, docs and prepared for v3
1 parent c62d3d3 commit 8302100

File tree

7 files changed

+628
-684
lines changed

7 files changed

+628
-684
lines changed

‎README.md‎

Lines changed: 20 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
22

3-
# vue3-particles
3+
# @tsparticles/vue3
44

5-
[![npm](https://img.shields.io/npm/v/vue3-particles)](https://www.npmjs.com/package/vue3-particles) [![npm](https://img.shields.io/npm/dm/vue3-particles)](https://www.npmjs.com/package/vue3-particles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
5+
[![npm](https://img.shields.io/npm/v/@tsparticles/vue3)](https://www.npmjs.com/package/@tsparticles/vue3) [![npm](https://img.shields.io/npm/dm/@tsparticles/vue3)](https://www.npmjs.com/package/@tsparticles/vue3) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
66

77
Official [tsParticles](https://github.com/matteobruni/tsparticles) VueJS 3.x component
88

@@ -13,32 +13,33 @@ Official [tsParticles](https://github.com/matteobruni/tsparticles) VueJS 3.x com
1313
## Installation
1414

1515
```shell script
16-
yarn add vue3-particles
16+
yarn add @tsparticles/vue3
1717
```
1818

1919
## Usage
2020

2121
```javascript
22-
import Particles from "vue3-particles";
22+
import Particles from "@tsparticles/vue3";
23+
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
24+
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
2325

24-
createApp(App).use(Particles);
26+
createApp(App).use(Particles, {
27+
init: async engine => {
28+
// await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need it
29+
await loadSlim(engine); // or you can load the slim version from "tsparticles-slim" if don't need Shapes or Animations
30+
},
31+
});
2532
```
2633

2734
### Demo config
2835

2936
```html
3037
<template>
3138
<div id="app">
32-
<vue-particles
33-
id="tsparticles"
34-
:particlesInit="particlesInit"
35-
:particlesLoaded="particlesLoaded"
36-
url="http://foo.bar/particles.json"
37-
/>
39+
<vue-particles id="tsparticles" :particlesLoaded="particlesLoaded" url="http://foo.bar/particles.json" />
3840

3941
<vue-particles
4042
id="tsparticles"
41-
:particlesInit="particlesInit"
4243
:particlesLoaded="particlesLoaded"
4344
:options="{
4445
background: {
@@ -57,7 +58,6 @@ createApp(App).use(Particles);
5758
enable: true,
5859
mode: 'repulse'
5960
},
60-
resize: true
6161
},
6262
modes: {
6363
bubble: {
@@ -89,15 +89,14 @@ createApp(App).use(Particles);
8989
move: {
9090
direction: 'none',
9191
enable: true,
92-
outMode: 'bounce',
92+
outModes: 'bounce',
9393
random: false,
9494
speed: 6,
9595
straight: false
9696
},
9797
number: {
9898
density: {
9999
enable: true,
100-
area: 800
101100
},
102101
value: 80
103102
},
@@ -108,8 +107,7 @@ createApp(App).use(Particles);
108107
type: 'circle'
109108
},
110109
size: {
111-
random: true,
112-
value: 5
110+
value: { min: 1, max: 5 }
113111
}
114112
},
115113
detectRetina: true
@@ -120,14 +118,6 @@ createApp(App).use(Particles);
120118
```
121119

122120
```javascript
123-
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
124-
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
125-
126-
const particlesInit = async engine => {
127-
//await loadFull(engine);
128-
await loadSlim(engine);
129-
};
130-
131121
const particlesLoaded = async container => {
132122
console.log("Particles container loaded", container);
133123
};
@@ -139,7 +129,7 @@ If TypeScript returns error while importing/using Particles plugin try adding th
139129
code:
140130

141131
```typescript
142-
declare module "vue3-particles";
132+
declare module "@tsparticles/vue3";
143133
```
144134

145135
## Demos
@@ -156,8 +146,9 @@ There's also a CodePen collection actively maintained and updated [here](https:/
156146

157147
If you are migrating your project from Vue 2.x to 3.x you need to these steps:
158148

159-
- Change the dependency from `vue2-particles` to `vue3-particles`
149+
- Change the dependency from `@tsparticles/vue2` to `@tsparticles/vue3`
160150
- Update the `node_modules` folder executing `npm install` or `yarn`
161-
- Change the `use` function from `Vue.use(Particles)` to `createApp(App).use(Particles)`.
151+
- Change the `use` function from `Vue.use(Particles, { init: /* omissis */ })`
152+
to `createApp(App).use(Particles, { init: /* omissis */ })`.
162153

163-
The `<Particles />` tag syntax remains the same, so you don't need to do any additional action.
154+
The `<vue-particles />` tag syntax remains the same, so you don't need to do any additional action.

‎apps/nuxt3/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,17 @@
1717
"*.**": "prettier --check --ignore-unknown"
1818
},
1919
"dependencies": {
20-
"@babel/core": "^7.23.5",
20+
"@babel/core": "^7.23.6",
2121
"@babel/eslint-parser": "^7.23.3",
2222
"@nuxt/ui-templates": "^1.3.1",
2323
"@nuxtjs/eslint-config": "^12.0.0",
2424
"@nuxtjs/eslint-module": "^4.1.0",
25-
"@vue/reactivity": "^3.3.11",
26-
"@vue/runtime-core": "^3.3.11",
27-
"@vue/runtime-dom": "^3.3.11",
28-
"@vue/shared": "^3.3.11",
25+
"@vue/reactivity": "^3.3.13",
26+
"@vue/runtime-core": "^3.3.13",
27+
"@vue/runtime-dom": "^3.3.13",
28+
"@vue/shared": "^3.3.13",
2929
"consola": "^3.2.3",
30-
"eslint": "^8.55.0",
30+
"eslint": "^8.56.0",
3131
"eslint-config-prettier": "^9.1.0",
3232
"eslint-plugin-nuxt": "^4.0.0",
3333
"eslint-plugin-vue": "^9.19.2",
@@ -37,7 +37,7 @@
3737
"tsparticles": "^3.0.2",
3838
"@tsparticles/engine": "^3.0.2",
3939
"typescript": "^5.3.3",
40-
"vue": "^3.3.11",
40+
"vue": "^3.3.13",
4141
"@tsparticles/vue3": "workspace:^",
4242
"webpack": "^5.89.0"
4343
}

‎apps/vue3/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,26 +15,26 @@
1515
"tsparticles": "^3.0.2",
1616
"@tsparticles/configs": "^3.0.2",
1717
"@tsparticles/engine": "^3.0.2",
18-
"vue": "^3.3.11",
18+
"vue": "^3.3.13",
1919
"vue-router": "^4.2.5",
2020
"@tsparticles/vue3": "workspace:^"
2121
},
2222
"devDependencies": {
23-
"@rushstack/eslint-patch": "^1.6.0",
23+
"@rushstack/eslint-patch": "^1.6.1",
2424
"@tsconfig/node18": "^18.2.2",
25-
"@types/node": "^20.10.4",
25+
"@types/node": "^20.10.5",
2626
"@vitejs/plugin-vue": "^4.5.2",
2727
"@vitejs/plugin-vue-jsx": "^3.1.0",
2828
"@vue/eslint-config-prettier": "^8.0.0",
2929
"@vue/eslint-config-typescript": "^12.0.0",
30-
"@vue/tsconfig": "^0.4.0",
31-
"eslint": "^8.55.0",
30+
"@vue/tsconfig": "^0.5.1",
31+
"eslint": "^8.56.0",
3232
"eslint-plugin-vue": "^9.19.2",
3333
"minimatch": "^9.0.3",
3434
"npm-run-all": "^4.1.5",
3535
"prettier": "^3.1.1",
3636
"typescript": "^5.3.3",
37-
"vite": "^5.0.7",
38-
"vue-tsc": "^1.8.25"
37+
"vite": "^5.0.10",
38+
"vue-tsc": "^1.8.26"
3939
}
4040
}

‎components/vue3/README.md‎

Lines changed: 20 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
22

3-
# vue3-particles
3+
# @tsparticles/vue3
44

5-
[![npm](https://img.shields.io/npm/v/vue3-particles)](https://www.npmjs.com/package/vue3-particles) [![npm](https://img.shields.io/npm/dm/vue3-particles)](https://www.npmjs.com/package/vue3-particles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
5+
[![npm](https://img.shields.io/npm/v/@tsparticles/vue3)](https://www.npmjs.com/package/@tsparticles/vue3) [![npm](https://img.shields.io/npm/dm/@tsparticles/vue3)](https://www.npmjs.com/package/@tsparticles/vue3) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
66

77
Official [tsParticles](https://github.com/matteobruni/tsparticles) VueJS 3.x component
88

@@ -13,32 +13,33 @@ Official [tsParticles](https://github.com/matteobruni/tsparticles) VueJS 3.x com
1313
## Installation
1414

1515
```shell script
16-
yarn add vue3-particles
16+
yarn add @tsparticles/vue3
1717
```
1818

1919
## Usage
2020

2121
```javascript
22-
import Particles from "vue3-particles";
22+
import Particles from "@tsparticles/vue3";
23+
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
24+
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
2325

24-
createApp(App).use(Particles);
26+
createApp(App).use(Particles, {
27+
init: async engine => {
28+
// await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need it
29+
await loadSlim(engine); // or you can load the slim version from "tsparticles-slim" if don't need Shapes or Animations
30+
},
31+
});
2532
```
2633

2734
### Demo config
2835

2936
```html
3037
<template>
3138
<div id="app">
32-
<vue-particles
33-
id="tsparticles"
34-
:particlesInit="particlesInit"
35-
:particlesLoaded="particlesLoaded"
36-
url="http://foo.bar/particles.json"
37-
/>
39+
<vue-particles id="tsparticles" :particlesLoaded="particlesLoaded" url="http://foo.bar/particles.json" />
3840

3941
<vue-particles
4042
id="tsparticles"
41-
:particlesInit="particlesInit"
4243
:particlesLoaded="particlesLoaded"
4344
:options="{
4445
background: {
@@ -57,7 +58,6 @@ createApp(App).use(Particles);
5758
enable: true,
5859
mode: 'repulse'
5960
},
60-
resize: true
6161
},
6262
modes: {
6363
bubble: {
@@ -86,21 +86,17 @@ createApp(App).use(Particles);
8686
opacity: 0.5,
8787
width: 1
8888
},
89-
collisions: {
90-
enable: true
91-
},
9289
move: {
9390
direction: 'none',
9491
enable: true,
95-
outMode: 'bounce',
92+
outModes: 'bounce',
9693
random: false,
9794
speed: 6,
9895
straight: false
9996
},
10097
number: {
10198
density: {
10299
enable: true,
103-
area: 800
104100
},
105101
value: 80
106102
},
@@ -111,8 +107,7 @@ createApp(App).use(Particles);
111107
type: 'circle'
112108
},
113109
size: {
114-
random: true,
115-
value: 5
110+
value: { min: 1, max: 5 }
116111
}
117112
},
118113
detectRetina: true
@@ -123,14 +118,6 @@ createApp(App).use(Particles);
123118
```
124119

125120
```javascript
126-
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
127-
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
128-
129-
const particlesInit = async engine => {
130-
//await loadFull(engine);
131-
await loadSlim(engine);
132-
};
133-
134121
const particlesLoaded = async container => {
135122
console.log("Particles container loaded", container);
136123
};
@@ -142,7 +129,7 @@ If TypeScript returns error while importing/using Particles plugin try adding th
142129
code:
143130

144131
```typescript
145-
declare module "vue3-particles";
132+
declare module "@tsparticles/vue3";
146133
```
147134

148135
## Demos
@@ -159,8 +146,9 @@ There's also a CodePen collection actively maintained and updated [here](https:/
159146

160147
If you are migrating your project from Vue 2.x to 3.x you need to these steps:
161148

162-
- Change the dependency from `vue2-particles` to `vue3-particles`
149+
- Change the dependency from `@tsparticles/vue2` to `@tsparticles/vue3`
163150
- Update the `node_modules` folder executing `npm install` or `yarn`
164-
- Change the `use` function from `Vue.use(Particles)` to `createApp(App).use(Particles)`.
151+
- Change the `use` function from `Vue.use(Particles, { init: /* omissis */ })`
152+
to `createApp(App).use(Particles, { init: /* omissis */ })`.
165153

166-
The `<Particles />` tag syntax remains the same, so you don't need to do any additional action.
154+
The `<vue-particles />` tag syntax remains the same, so you don't need to do any additional action.

‎components/vue3/package.json‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -93,27 +93,30 @@
9393
}
9494
],
9595
"prettier": "@tsparticles/prettier-config",
96+
"publishConfig": {
97+
"access": "public"
98+
},
9699
"dependencies": {
97100
"@tsparticles/engine": "^3.0.2",
98-
"vue": "^3.3.11"
101+
"vue": "^3.3.13"
99102
},
100103
"devDependencies": {
101-
"@rushstack/eslint-patch": "^1.6.0",
104+
"@rushstack/eslint-patch": "^1.6.1",
102105
"@tsconfig/node18": "^18.2.2",
103-
"@tsparticles/prettier-config": "^2.0.0",
104-
"@types/node": "^20.10.4",
106+
"@tsparticles/prettier-config": "^2.0.1",
107+
"@types/node": "^20.10.5",
105108
"@vitejs/plugin-vue": "^4.5.2",
106109
"@vitejs/plugin-vue-jsx": "^3.1.0",
107110
"@vue/eslint-config-prettier": "^8.0.0",
108111
"@vue/eslint-config-typescript": "^12.0.0",
109-
"@vue/tsconfig": "^0.4.0",
110-
"eslint": "^8.55.0",
112+
"@vue/tsconfig": "^0.5.1",
113+
"eslint": "^8.56.0",
111114
"eslint-plugin-vue": "^9.19.2",
112115
"prettier": "^3.1.1",
113116
"typescript": "^5.3.3",
114-
"vite": "^5.0.7",
117+
"vite": "^5.0.10",
115118
"vite-plugin-dts": "^3.6.4",
116-
"vue-tsc": "^1.8.25"
119+
"vue-tsc": "^1.8.26"
117120
},
118121
"main": "dist/particles.umd.js",
119122
"module": "dist/particles.es.js",

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"@commitlint/cli": "^18.4.3",
1111
"@commitlint/config-conventional": "^18.4.3",
1212
"husky": "^8.0.3",
13-
"lerna": "^8.0.0"
13+
"lerna": "^8.0.1"
1414
},
1515
"workspaces": [
1616
"apps/*",

0 commit comments

Comments
 (0)