vue-vanta-revamp

vue-vanta-revamp: Add Animated Vanta.js Backgrounds to Your Vue and Nuxt Projects

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.

Features

• 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

Installation

npm i vue-vanta-revamp

Usage

Quick use example for Nuxt3

/components/Background.vue

<template>
  <div>   
      <v-vanta></v-vanta>
  </div>
</template>

<script>
import VVanta from 'vue-vanta-revamp';
export default {
  components: { VVanta }
}
</script>

<style>
#vanta-bg {
  z-index: -1000;
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
}
</style>

/pages/index.vue

<template>
  <div>
    <Background></Background>
    <div>
      <h1>skewll.com</h1>
    </div>
  </div>
</template>

<script>
export default {}
</script>

A little more advanced example usage for Nuxt3

/components/Background.vue

<template>
    <div>   
        <v-vanta ref="vantaInstance" vantaId="vanta-bg" :effect=effect :options=options>
            <slot/>
        </v-vanta>
    </div>
</template>
  
<script>
import VVanta from 'vue-vanta-revamp';
export default {
    components: { VVanta },
    data() {
        return {
            effect: 'waves',
            options: {
                mouseControls: true,
                touchControls: true,
                gyroControls: false,
                minHeight: 200.00,
                minWidth: 200.00,
                scale: 1.00,
                scaleMobile: 1.00,
                color: 0x0,
                shininess: 85.00,
                waveHeight: 6.00,
                waveSpeed: 1,
                zoom: .75,
            }
        }
    },
    methods: {
        setupVanta(effect = this.effect, options = this.options) {
            this.$refs.vantaInstance.setupVanta(effect, options);
        },
        destroyVanta() {
          this.$refs.vantaInstance.destroyVanta();
        },
        changeOptions(newOptions) {
            this.$refs.vantaInstance.changeOptions(newOptions);
        },
        changeEffect(newEffect, newOptions) {
            this.$refs.vantaInstance.changeEffect(newEffect,newOptions);
        },
        resizeEffect() {
            this.$refs.vantaInstance.resizeEffect();
        }
    }   
}
</script>
  
<style>
#vanta-bg {
    z-index: -1000;
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
  }
</style>

/pages/index.vue

<template>
  <div>
    <Background> You can now pass content through to a slot </Background>
    <div>
      <h1>skewll.com</h1>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
</style>

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 ${effect}-vanta.

Changelog

0.1.2 - 2024-03-10

Added

• new methods: setupVanta, destroyVanta, changeOptions, changeEffect, resizeEffect
• ability to pass content via nuxt slot

Changed

• functionality so vanta instance is destroyed when unmounting automatically.
• README.md

Fixed

• Bug appending scripts multiple times
• Bug creating multiple vanta instances