Integration with vue 3?

[atif0075]

Integration with vue 3?

[maxwellito]

Hi, I don't know how Vue 3 works. But I guess you need to access the DOM element you want to manipulate

[rangeldor]

<template>
  <svg
    id="animate-icon-dlavro"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 368.5 66.62"
  >
    <g data-name="Camada 2">
      <g
        id="Camada_1-2"
        data-name="Camada 1"
      ><path
        :fill="st1Fill"
        :stroke="st1Stroke"
        class="cls-1"
        d="M59.72,35.42a.78.78,0,0,0-.39-.69c-1.11-.65-4.73-2.35-12.13-2.35-8.79,0-28.67,5.53-46.69,31.09a2,2,0,0,0,1.62,3.15H25.58C34.57,66.62,59.46,63.22,59.72,35.42Z"
      />
...
      </g>
    </g>
  </svg>
</template>

<script lang="ts" setup>
import Vivus from 'vivus'
import { ref, onMounted, computed, toRefs } from 'vue'

interface Props {
  animate?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  animate: true
})

const { animate } = toRefs(props)

const isStroke = ref<boolean>(false)
const isFill = ref<boolean>(false)

const st1Fill = computed(() => {
  return isFill.value ? '#43807A' : 'rgb(255,255,255)'
})

const st1Stroke = computed(() => {
  return isStroke.value ? 'rgb(255,255,255)' : '#43807A'
})

const st2Fill = computed(() => {
  return isFill.value ? '#2D2D2D' : 'rgb(255,255,255)'
})

const st2Stroke = computed(() => {
  return isStroke.value ? 'rgb(255,255,255)' : '#2D2D2D'
})

onMounted(() => {
  if (animate.value) {
    const icon = new Vivus('animate-icon-dlavro', {
      type: 'delayed',
      duration: 150,
      animTimingFunction: Vivus.EASE
    })

    icon.play(() => {
      isFill.value = true
      isStroke.value = true
    // called after the animation completes
    })
  } else {
    isFill.value = true
    isStroke.value = true
  }
})
</script>

<style scoped>
.cls-3 {
  fill: v-bind(st2Fill);
  stroke: v-bind(st2Stroke);
}
</style>

I have a vue component that is an icon.

I hope I could have helped :)

[erikacamilleri]

Hi, sorry if this is too basic, I have a Vue3 project but the import is not working for me:

import Vivus from vivus with an npm insall. I see it included in the dependencies, but it cannot recognise 'vivus'. I never had this probem before. Not sure how to debug this.

[KosKosovuch]

@erikacamilleri I hope you're talking about the TS issue and you need to install types dep

npm install @types/vivus -D