Is there a way to use Vanta.js effects in a Nuxt.js project? - vue.js

Question

I am currently making a personal portfolio site using Nuxt.js (using TypeScript).
I decided I want to use Vanta.js Halo effect. for my landing page, but I can't seem to find a way to make it work properly.
I tried using three.js and vanta npm packages, but it produces an error.
'Cannot read property “texture” of undefined'
import * as THREE from 'three'
import HALO from 'vanta/dist/vanta.halo.min.js'
...
*inside Vue.extend block*
mounted(){
this.vantaEffect = HALO({
el: '#landing',
*rest of the settings*
THREE: THREE
})
}
Is there any way I can make it work?
Update:
I managed to get rid of the errors using static files - method from this vanta repo issue, but static script for initiating can't find the #landing element.
/*nuxt.config.js*/
...
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || '',
},
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
script: [
{ src: 'vanta.halo.min.js' },
{ src: 'three.min.js' },
{ src: 'effect.js' },
],
},
...
/*effect.js - file that initializes the effect*/
VANTA.HALO({
el: '#landing',
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
baseColor: 0xffffff,
backgroundColor: 0x2d2d2d,
THREE,
})
Update 2:
I managed to fix the problem with not finding the #landing element by exporting a function that initializes the effect and running it from the mounted() and passing the element reference.
/*effect.js*/
const vantaEffect = (elementRef) => {
return window.VANTA.HALO({
el: elementRef,
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
THREE: THREE,
})
}
export default vantaEffect
Now this error shows up:
[VANTA] Init error TypeError: Cannot read property 'LinearFilter' of undefined

Answer 1

So, I fiddled a bit with the sandbox that Lawrence provided, and I was able to make it work like this: https://codesandbox.io/s/winter-thunder-pffsq
Basically what happens is that Vanta assumes that THREE is set on window, which doesn't happen when we import it from npm. So you must import Vanta after you import THREE and set it as a window variable.
import * as THREE from "three";
// import HALO from "vanta/dist/vanta.halo.min";
export default {
async mounted() {
// window is only avaiable on browser
if (process.browser) {
window.THREE = THREE;
const { default: HALO } = await import("vanta/dist/vanta.halo.min");
HALO({
el: "#abc",
mouseControls: true,
touchControls: true,
minHeight: 200.0,
minWidth: 200.0,
xOffset: -0.17,
size: 2.1,
THREE: window.THREE
});
}
}
};