> Add animated vanta.js backgrounds to vue and nuxt projects in a few lines of code.
npm install vue-vanta-revamp> vue-vanta-revamp is a revamped version of the original vue-vanta package, offering a seamless way to integrate animated Vanta.js backgrounds into your Vue and Nuxt projects. With Vue-vanta-revamp, you can enhance your applications with stunning visual effects in just a few lines of code.
- Simplified Setup: Easily add animated Vanta.js backgrounds to your projects.
- Automatic Initialization and Destruction: Vanta.js setup is handled automatically on mount and destroyed on unmount.
- Efficient Script Handling: P5 and/or THREE scripts are appended to the DOM only once, and the Three.js effect script loads only once.
- Versatile Customization: Change effect options, switch effects, and resize effects with ease.
| Methods | Description | type | params |
| ----------------- | ---------------- | :--------: | :----------: |
| setupVanta(effect, options) | sets up vanta if destroyed | Function | String,Object |
| destroyVanta() | destroy vanta instance | Function | N/A |
| changeOptions(newOptions) | change effect options | Function | Object |
| changeEffect(newEffect, newOptions) | change vanta effect/options | Function | String,Object |
| resizeEffect() | not sure how this works yet, but its here. | Function | none |
bash
npm i vue-vanta-revamp
`Usage
$3
_/components/Background.vue_
vue
`
_/pages/index.vue_
vue
skewll.com
`
$3
_/components/Background.vue_
vue
`
_/pages/index.vue_
vue
You can now pass content through to a slot
skewll.com
`
Parameters
The following parameters can be passed into the component:
| Property | Description | Type | Default |
|----------|-------------|------|---------|
| vantaId | #id of your vanta element | String | vanta-bg |
| effect | See all effects at vantajs.com | String | waves |
| options | Each effect has its own specific parameters. Check them out at vantajs.com | Object | |
Methods
The component provides the following methods:
- setupVanta(effect, options): Sets up Vanta.js with the specified effect and options.
- destroyVanta(): Destroys the Vanta.js instance.
- changeOptions(newOptions): Changes the effect options.
- changeEffect(newEffect, newOptions): Changes the Vanta.js effect and/or options.
- resizeEffect(): Not entirely clear how this works yet, but it's available.
Notes
- If you need to completely destroy everything, you will need to manually delete the scripts from the DOM. The possible script IDs are 'p5', 'three', and