Skip to content

Commit f77332b

Browse files
matteobrunimatteobruni
authored
Merge pull request #49 from tsparticles/dev
3.0.0
2 parents 9e8b6d9 + 4a269ef commit f77332b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+4084
-3861
lines changed

‎CHANGELOG.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,33 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
# [3.0.0](https://github.com/tsparticles/vue3/compare/v2.12.0...v3.0.0) (2023-12-22)
7+
8+
9+
### Bug Fixes
10+
11+
* **deps:** update dependency eslint-config-prettier to v9 ([c6ba232](https://github.com/tsparticles/vue3/commit/c6ba232b328f3340b001f5b250c369030c91f66b))
12+
* **deps:** update dependency lint-staged to v14 ([30c622d](https://github.com/tsparticles/vue3/commit/30c622d37c46ae5047950b88111e861e2cf8746a))
13+
* **example:** clean up Nuxt example & fix type-checking ([4a93b5d](https://github.com/tsparticles/vue3/commit/4a93b5d1346ee7e88d625afbc5aa785340dd371c))
14+
* **example:** clean up Vite example and remove dead code ([7064feb](https://github.com/tsparticles/vue3/commit/7064feb638a503a0bb158c49d0a76d16142bede2))
15+
* **example:** disable SSR for Nuxt plugin ([55980f1](https://github.com/tsparticles/vue3/commit/55980f12947b43712070e6d36d1a51425e8cf23d))
16+
* **example:** remove console#log ([e537e3a](https://github.com/tsparticles/vue3/commit/e537e3ae2fb2fbc101f6ef18f2f5dec518407f34))
17+
* **example:** remove console#log ([a89474a](https://github.com/tsparticles/vue3/commit/a89474a7c67ba8e6429c38499b7f4b8621280a87))
18+
* **example:** remove toRaw ([f74d07d](https://github.com/tsparticles/vue3/commit/f74d07d4919b1a17be96cd54fd343a460c86cf4d))
19+
* **example:** use proper types ([17ff54e](https://github.com/tsparticles/vue3/commit/17ff54ecb331ac260892fb5a559dd1d34ef3fc92))
20+
* **example:** use type declaration ([eee2cc8](https://github.com/tsparticles/vue3/commit/eee2cc8782a275f0bf771a6ed7b2b3be5bf87e85))
21+
* use event syntax for particlesLoaded ([5b4de3a](https://github.com/tsparticles/vue3/commit/5b4de3a411ede58c00517cf72fbab5bd5acfb882))
22+
23+
24+
### Features
25+
26+
* updated for v3 ([c49ca9f](https://github.com/tsparticles/vue3/commit/c49ca9f1aec1f7ddaa0de7806291a5c4c78eb848))
27+
* updates for v3 ([c62d3d3](https://github.com/tsparticles/vue3/commit/c62d3d30dfcc5307490fb15f2ed132b36036f252))
28+
29+
30+
31+
32+
633
# [2.12.0](https://github.com/tsparticles/vue3/compare/v2.11.1...v2.12.0) (2023-08-04)
734

835
**Note:** Version bump only for package vue3-particles-workspace

‎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/.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
shamefully-hoist=true

‎apps/nuxt3/CHANGELOG.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,29 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
# [3.0.0](https://github.com/tsparticles/vue3/compare/v2.12.0...v3.0.0) (2023-12-22)
7+
8+
9+
### Bug Fixes
10+
11+
* **deps:** update dependency eslint-config-prettier to v9 ([c6ba232](https://github.com/tsparticles/vue3/commit/c6ba232b328f3340b001f5b250c369030c91f66b))
12+
* **deps:** update dependency lint-staged to v14 ([30c622d](https://github.com/tsparticles/vue3/commit/30c622d37c46ae5047950b88111e861e2cf8746a))
13+
* **example:** clean up Nuxt example & fix type-checking ([4a93b5d](https://github.com/tsparticles/vue3/commit/4a93b5d1346ee7e88d625afbc5aa785340dd371c))
14+
* **example:** disable SSR for Nuxt plugin ([55980f1](https://github.com/tsparticles/vue3/commit/55980f12947b43712070e6d36d1a51425e8cf23d))
15+
* **example:** remove console#log ([a89474a](https://github.com/tsparticles/vue3/commit/a89474a7c67ba8e6429c38499b7f4b8621280a87))
16+
* **example:** remove toRaw ([f74d07d](https://github.com/tsparticles/vue3/commit/f74d07d4919b1a17be96cd54fd343a460c86cf4d))
17+
* **example:** use proper types ([17ff54e](https://github.com/tsparticles/vue3/commit/17ff54ecb331ac260892fb5a559dd1d34ef3fc92))
18+
* **example:** use type declaration ([eee2cc8](https://github.com/tsparticles/vue3/commit/eee2cc8782a275f0bf771a6ed7b2b3be5bf87e85))
19+
20+
21+
### Features
22+
23+
* updated for v3 ([c49ca9f](https://github.com/tsparticles/vue3/commit/c49ca9f1aec1f7ddaa0de7806291a5c4c78eb848))
24+
25+
26+
27+
28+
629
# [2.12.0](https://github.com/tsparticles/vue3/compare/v2.11.1...v2.12.0) (2023-08-04)
730

831
**Note:** Version bump only for package nuxt3-particles-demo

‎apps/nuxt3/app.vue‎

Lines changed: 32 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,42 @@
11
<template>
2-
<div>
3-
<NuxtWelcome />
4-
<vue-particles
5-
id="tsparticles"
6-
:options="options"
7-
:particles-init="particlesInit"
8-
/>
9-
</div>
2+
<div>
3+
<!--<NuxtWelcome/>-->
4+
<client-only>
5+
<vue-particles
6+
id="tsparticles"
7+
:options="options"
8+
@particles-loaded="particlesLoaded"
9+
/>
10+
</client-only>
11+
</div>
1012
</template>
11-
<script>
12-
import { loadFull } from "tsparticles";
13+
<script setup lang="ts">
14+
import type { ISourceOptions, Container } from "@tsparticles/engine";
1315
14-
export default {
15-
name: "NuxtTutorial",
16-
data() {
17-
return {
18-
options: {
19-
background: {
20-
color: "#fff"
21-
},
22-
fullScreen: {
23-
enable: true,
24-
zIndex: -1
25-
},
26-
particles: {
27-
color: {
28-
value: "#000"
29-
},
30-
links: {
31-
color: "#000",
32-
enable: true
33-
},
34-
move: {
35-
enable: true
36-
},
37-
number: {
38-
value: 100
39-
}
40-
}
41-
}
42-
};
16+
const options: ISourceOptions = {
17+
background: {
18+
color: "#000"
19+
},
20+
particles: {
21+
links: {
22+
enable: true
4323
},
44-
methods: {
45-
particlesInit: async (engine) => {
46-
await loadFull(engine);
47-
}
24+
move: {
25+
enable: true
26+
},
27+
number: {
28+
value: 100
4829
}
49-
};
30+
}
31+
}
32+
33+
const particlesLoaded = (container?: Container) => {
34+
console.log(container)
35+
}
36+
5037
</script>
5138
<style>
5239
.bg-white {
53-
background: none !important;
40+
background: none !important;
5441
}
5542
</style>

‎apps/nuxt3/nuxt.config.ts‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
11
import { defineNuxtConfig } from 'nuxt/config'
22

33
// https://v3.nuxtjs.org/api/configuration/nuxt.config
4-
export default defineNuxtConfig({
5-
plugins: [
6-
{
7-
src: '~/plugins/vue3-particles.ts',
8-
mode: 'client',
9-
},
10-
],
11-
})
4+
export default defineNuxtConfig({})

‎apps/nuxt3/package.json‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nuxt3-particles-demo",
3-
"version": "2.12.0",
3+
"version": "3.0.0",
44
"private": true,
55
"scripts": {
66
"build": "nuxt build",
@@ -17,27 +17,28 @@
1717
"*.**": "prettier --check --ignore-unknown"
1818
},
1919
"dependencies": {
20-
"@babel/core": "^7.22.9",
21-
"@babel/eslint-parser": "^7.22.9",
20+
"@babel/core": "^7.23.6",
21+
"@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.4",
26-
"@vue/runtime-core": "^3.3.4",
27-
"@vue/runtime-dom": "^3.3.4",
28-
"@vue/shared": "^3.3.4",
25+
"@tsparticles/engine": "^3.0.2",
26+
"@tsparticles/vue3": "workspace:^",
27+
"@vue/reactivity": "^3.3.13",
28+
"@vue/runtime-core": "^3.3.13",
29+
"@vue/runtime-dom": "^3.3.13",
30+
"@vue/shared": "^3.3.13",
2931
"consola": "^3.2.3",
30-
"eslint": "^8.46.0",
31-
"eslint-config-prettier": "^9.0.0",
32+
"eslint": "^8.56.0",
33+
"eslint-config-prettier": "^9.1.0",
3234
"eslint-plugin-nuxt": "^4.0.0",
33-
"eslint-plugin-vue": "^9.16.1",
34-
"lint-staged": "^14.0.0",
35-
"nuxt": "^3.6.5",
36-
"prettier": "^3.0.1",
37-
"tsparticles": "^2.12.0",
38-
"typescript": "^5.1.6",
39-
"vue": "^3.3.4",
40-
"vue3-particles": "workspace:^",
41-
"webpack": "^5.88.2"
35+
"eslint-plugin-vue": "^9.19.2",
36+
"lint-staged": "^15.2.0",
37+
"nuxt": "^3.8.2",
38+
"prettier": "^3.1.1",
39+
"tsparticles": "^3.0.2",
40+
"typescript": "^5.3.3",
41+
"vue": "^3.3.13",
42+
"webpack": "^5.89.0"
4243
}
4344
}

‎apps/nuxt3/plugins/vue3-particles.client.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Particles from '@tsparticles/vue3'
2+
import { loadFull } from "tsparticles";
3+
import { defineNuxtPlugin } from "#app";
4+
5+
export default defineNuxtPlugin((nuxtApp) => {
6+
// Doing something with nuxtApp
7+
nuxtApp.vueApp.use(Particles, {
8+
init: async (engine) => {
9+
await loadFull(engine);
10+
}
11+
})
12+
})

‎apps/nuxt3/plugins/vue3-particles.ts‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎apps/nuxt3/shim-vue3-particles.d.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)