Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

as shown in the below posted code, i want to export the function GISWSCaller . i am following the tutorial in this link , and i want to create something as in the 3rd code snippet in that link. the problem i am encountring is, for the below posted code, the VS-codes studio can not recognize the code as valid. i mean the same code posted below when pasted into the VS-codes, it becomes colored in whitw as shonw in the screen shot attached.

please let me know how correctly i should export the code posted below.

updated code .vue :

import { provide } from 'vue';
let res = undefined
export default function GISWSCaller(){
  async function fetchURL(params){
    console.log("params:",params);
    const splitted = params.split(',')
    if (splitted.length == 4) {
      const response = await fetch('https://xx/xx/getDistanceFromOriginToDestination/' + params)
      res =  await response.json()
      return res
    return false
const ctx = {
  fetchURL
provide('GISWSContext',ctx)
return fetchURL
img:
                morning.i followed the instructions you presupposed, but still i can not use provide(GISWSContext,ctx.......i updated my code as shown above ...would you please tell me how to fix it
– Amrmsmb
                Jun 13 at 5:00
                can you please tell me how in this tutorial:logaretm.com/blog/making-the-most-out-of-vuejs-injections/… the author used provide inside an exported functio?
– Amrmsmb
                Jun 14 at 4:53
                What do you mean how? In the tutorial he used composables, it's a way to extract common code that usually would go into script setup into a standalone function. Then in a vue component where you need it you import the function and say const ctx = useAppUserContext()and then you have access ctx.
– disservin
                Jun 14 at 6:24
                thank you .but it is still vague to me. the author did not use <script setup>, so how provide can be used then? so sorry for the lake of understanding
– Amrmsmb
                Jun 14 at 6:31
                When you have <script setup> you are writing a component, when you just have a function you have a composable (if you write vue code in there). provide can be used because it's imported import { provide } from 'vue'; I recommend you read more about composition api and composables.
– disservin
                Jun 14 at 7:32
all your code must be inside this parts.
your file is .vue format, and your code is out of the mentions parts.
put your code inside the script tag, or change file extension to .js to resolve this problem.
more information
edited:
src/utils/GISWSCaller.is
let res = undefined
export function useGISWSCaller() {
    async function fetchURL(params) {
        console.log('params:', params);
        const splitted = params.split(',')
        if (splitted.length == 4) {
            const response = await fetch('https://xx/xx/getDistanceFromOriginToDestination/' + params)
            res = await response.json()
            return res
        return false
    const ctx = {
        fetchURL
    return ctx
src/main.js
import {createApp} from 'vue'
import {useGISWSCaller} from 'GISWSCaller'
const app = createApp({})
const ctx = useGISWSCaller()
app.provide('ctx', ctx)
app.mount('#app');
                If I placed my the code I posted above inside the tags you mentioned, will I still be able to export the code as a function?
– Amrmsmb
                Jun 12 at 14:26
                for resusing that functions? not specially but you can create a js file, and put your code inside that, so in the mentioned component and another places, use that file. you can export each functions you want and reuse in another module similar vue components, js files or ts files, ....
– netlorecomment
                Jun 13 at 8:55
                better do not do. but i recommend to you  use this method that good for large scale projects:
– netlorecomment
                Jun 13 at 9:02
                can you please tell me how in this tutorial:logaretm.com/blog/making-the-most-out-of-vuejs-injections/… the author used provide inside an exported functio?
– Amrmsmb
                Jun 14 at 4:53
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.