animated 3d background using vanta.js in vue application

Question

I need to add an animated 3d background using vanta.js in my vue application, I searched for various options in open sources, but I did not find a suitable solution for installing and adding

this my vue app code

  <template>
      <div id="app">
    <div class="vanta_area" ref="Area">
      <headerPage></headerPage>
      <market></market>
    </div>
  </div>

    </template>
    
    <script>
    import headerPage from "./components/header-page.vue";
    import market from "./components/market-page.vue";
    
    export default {
      name: "App",
      components: {
        market,
        headerPage,
      },
    };
    </script>
    
    <style>
    @import url("https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500;600;700&display=swap");
    
    * {
      margin: 0;
      padding: 0;
      font-family: "Jura", sans-serif;
    }
    #app {
      width: 100%;
      height: 100vh;
      background-color: black;
    }
    .hh {
      margin-top: 30vmin;
    }
    .vanta_area {
      width: 100vw;
      height: 100vh;
      position: fixed;
    }
    </style>

class "vanta-area" created for background