pk

.idea/deployment.xml

@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="PublishConfigData" remoteFilesAllowedToDisappearOnAutoupload="false">
+  <component name="PublishConfigData" serverName="craveteck" remoteFilesAllowedToDisappearOnAutoupload="false">
     <serverData>
-      <paths name="cravetecknew">
+      <paths name="craveteck">
         <serverdata>
           <mappings>
-            <mapping local="$PROJECT_DIR$" web="/" />
+            <mapping deploy="/var/www/mindbost.craveteck.com" local="$PROJECT_DIR$" web="/" />
           </mappings>
         </serverdata>
       </paths>

.idea/sshConfigs.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="SshConfigs">
+    <configs>
+      <sshConfig host="46.101.77.136" id="21fb0bf5-1d7f-4512-bd29-b1d0309d6ffe" keyPath="$USER_HOME$/Documents/server keys/main Server/mykey.ppk" port="22" nameFormat="DESCRIPTIVE" username="root" useOpenSSHConfig="true" />
+    </configs>
+  </component>
+</project>

.idea/webServers.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="WebServers">
+    <option name="servers">
+      <webServer id="20d7843e-0e96-481a-8bed-9d6b23084f02" name="craveteck">
+        <fileTransfer accessType="SFTP" host="46.101.77.136" port="22" sshConfigId="21fb0bf5-1d7f-4512-bd29-b1d0309d6ffe" sshConfig="root@46.101.77.136:22 key" keyPair="true">
+          <advancedOptions>
+            <advancedOptions dataProtectionLevel="Private" keepAliveTimeout="0" passiveMode="true" shareSSLContext="true" />
+          </advancedOptions>
+        </fileTransfer>
+      </webServer>
+    </option>
+  </component>
+</project>

nuxt.config.ts

@@ -1,6 +1,11 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
 
+    plugins:[
+    {src: '~/plugins/Vue3Lottie.client', mode: 'client'},
+    {src: '~/plugins/AudioVisual.client', mode: 'client'}
+
+    ],
 
     css:[
         '~/assets/css/style.css'

package.json

@@ -19,6 +19,8 @@
     "bootstrap": "^5.2.3",
     "vite": "^3.2.5",
     "vue": "^3.2.26",
-    "vue-audio-visual": "^3.0.2"
+    "vue-audio-visual": "^3.0.3",
+    "vue-lottie": "^0.2.1",
+    "vue3-lottie": "^2.4.0"
   }
 }

pages/index.vue

@@ -2,12 +2,34 @@
     <div>
       <home-bar />
       <NuxtPage page-key="child" />
+
+      <client-only>
+        <Vue3Lottie
+            :animation-data="anim"
+
+            :height="200"
+            :width="200"
+        />
+      </client-only>
     </div>
 </template>
 <script>
 
 import HomeBar from "../components/homebar";
+import * as animationData from "~/assets/animation.json";
+
 export default {
   components: {HomeBar},
+  data() {
+    return {
+      anim: animationData.default, // for saving the reference to the animation
+      lottieOptions: { animationData: animationData.default }
+    };
+  },
+  methods:{
+    handleAnimation: function (anim) {
+      this.anim = anim;
+    }
+  }
 }
 </script>

pages/index/index.vue

@@ -4,7 +4,10 @@
     <div class="row pt-3">
       <div class="col-12 text-center">
         <img src="~/assets/image/Cloudsoftware.png">
-
+        <av-waveform
+            src="/maskin2.wav"
+            played-line-width="2"
+        ></av-waveform>
         <h4 class="fw-bold  ">Focus</h4>
         <div class="pt-3">
           <img src="~/assets/image/Frame19439.png" />
@@ -22,6 +25,7 @@
 
 export default {
   name:'HomePage',
+
   created() {
     return{
       player : '',

plugins/AudioVisual.client.ts

@@ -0,0 +1,5 @@
+import { AVPlugin } from 'vue-audio-visual'
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.use(AVPlugin)
+})

plugins/Vue3Lottie.client.ts

@@ -0,0 +1,5 @@
+import Vue3Lottie from 'vue3-lottie'
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.use(Vue3Lottie)
+})