vuejs call one component function from other function

Question

Still up the learning curve.

I have this progessComponent that acts like a common utility for other components. As the name suggest, it tracks the progress of an activity

progressComponent.js

import { ref } from "vue"
export default {
  setup() {
    var self = this
    const progressBarVal = ref(0)
    function makeProgress(inVal) {
      if (progressBarVal.value < 100) {
        progressBarVal.value += inVal
        console.log("progress" + progressBarVal.value)
      }
    }
    function clearDiv(elementID) {
      //some code here
    }
    return {
      progressBarVal,
      makeProgress,
      clearDiv
    }
  }
}

bdggtt.js
Component for reading couple of .jsons and processing them

import {
  ref,
  defineProps,
  onMounted,
  shallowRef,
  shallowReactive,
  reactive,
  computed
} from "vue"
export default {
  setup() {
    onMounted(async () => {
      //Read Socials Json
      //makeProgress(10)
      //Read activityJson
      //makeProgress(10) //Total 20
    })
    var self = this

    const message = ref("")
    const pgSocialsData = []
    const pgSocials = shallowRef(pgSocialsData)

    function getPgSocials(inPgLst, inTitle) {
      //Process
      //makeProgress(10) //Total 30
    }
    function getPgConnections(inPgLst, inTitle) {
      //Process
      //makeProgress(10) //Total 40
    }
    function getActivity(inPgLst, inTitle) {
      //Process
      //makeProgress(10) //Total 50
    }

    return {
      message,
      pgSocials,
      getPgData
    }
  }
}

readbillSub.js
Does another set of activities

import {
  ref,
  defineProps,
  onMounted,
  shallowRef,
  shallowReactive,
  reactive,
  computed
} from "vue"
export default {
  setup() {
    onMounted(async () => {
      console.log("Hello")

      progressBarVal.value = 25

      let dataURL = "./_ini/billjson.json"
      //makeProgress(10) //Total 60

      message.value = "3"
      message.value = "contact"
      const params = new URLSearchParams(window.location.search)

      if (params.has("id")) {
        console.log("Had id")
        console.log(params.get("id"))
        message.value = params.get("id")
      }
    })

    var self = this
    const userPostData = []
    const userPosts = ref(userPostData)
    const message = ref("")

    function getSubMenu(pgMenus) {
      //some code here
      //makeProgress(10) //Total 80
    }

    function getPgData(inPgLst, inTitle) {
      //some code here
      //makeProgress(10) //Total 90
    }
    return {
      message,
      userPosts,
      getSubMenu
    }
  }
}

And main.js

import { createApp } from "vue"

//The below is wrong
import appPgFunc from "./vuejs/progressComponent.js"
const appPg = createApp(appPgFunc)
appPg.mount("#PgBar")

import appUserFunc from "./vuejs/bdggtt.js"
const appUser = createApp(appUserFunc)
appJson.mount("#contdSpace")

import appBillsFunc from "./vuejs/readbillSub.js"
const appBills = createApp(appBillsFunc)
appBills.mount("#hdrSpace")

I am not using build setup.

In progressComponent.js I have this function makeProgress. I want to call it from bdggtt.js and readbillSub.js and any other components. How can I do it?

tao · Accepted Answer · 2025-08-29 14:56:08Z

You're looking for one of the cornerstones of Vue 3's architecture, a composable.

Create a progress-bar.js file and place the progress bar logic inside of it:

import { ref } from "vue"
const progressBarVal = ref(0)
export const useProgressBar = () => {
  function makeProgress(val) {
    if (progressBarVal.value < 100) {
      progressBarVal.value += inVal
      console.log("progress" + progressBarVal.value)
    }
  }
  return {
    progressBarVal,
    makeProgress
  }
}

And now update progressComponent.js to:

import { useProgressBar } from "./progress-bar"
export default {
  setup() {
    const { progressBarVal, makeProgress } = useProgressBar()

    function clearDiv(elementID) {
      //some code here
    }
    return {
      progressBarVal,
      makeProgress,
      clearDiv
    }
  }
}

In any other component where you need makeProgress, simply import useProgressBar, call it and get makeProgress from the returned value.

Important note: I haven't actually tested the code, I hope it doesn't have any name mismatches or typos, I've written it on the fly, to outline the principle.

Nermin · Accepted Answer · 2025-08-29 14:39:32Z

0

You could make a shared progress file.

For example, "progress.js":

import { ref } from "vue"

export const progressBarVal = ref(0)

export function makeProgress(amount) {
  progressBarVal.value += amount
  console.log("progress: " + progressBarVal.value)
}

And then use it like this:

import { makeProgress } from "./progress.js"

export default {
  setup() {
    onMounted(() => {
      makeProgress(10)
    })
  }
}

answered Aug 29 at 14:39

Nermin

1,14011 silver badges30 bronze badges

1 Comment

joseph son Sep 1 at 6:55

Thanks @Nermin. Also works and simple

Collectives™ on Stack Overflow

vuejs call one component function from other function

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related