How to create reusable functions in Vuejs?

Question

I have this function in a Vuejs File which calls another function which is imported from a JS File.

Demo.vue

import Data from "demofile.js"

created(){
  this.getResult()
}

methods(){
async getResult(){
      Data.example() // Fetching Data from API
      .then((results) =>{
        this.$set(this,"results",results) // storing in event data()
        console.log(this.results)
    })
    .catch(e =>console.log(e, "Error from catch"))
  }
 }

I want to make this function reusable so that I could use it on any other VueJS files.

LastM4N · Accepted Answer · 2021-01-14 13:56:48Z

2

Alternative solution which I like more.

Create inside src/ a folder with name utils and inside the folder create .js file like globalFunctions.js and add the method

export const consoleLogName = (input) => {
    console.log(input)
  }

And then in Component.vue import the file:

import { consoleLogName} from "@/utils/globalFunctions";

and register the method in methods like:

methods:{
 consoleLogName: consoleLogName,
 otherMethodhere(){
  ......
 }
}

or with desctructuring providing the same name, this is a shortcut:

 methods:{
     consoleLogName,
     otherMethodhere(){
      ......
     }
 }

and use it in template as a regular method:

<template>
 <div>
  <span @click="consoleLogName('My Name')"></span>
 </div>
</template>

edited Jan 14, 2021 at 13:56

answered Jan 14, 2021 at 13:50

LastM4N

2,2502 gold badges19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 00:56:52Z

0

You can use mixins to re-use your functions in other Vue.js files.

Official documentation: https://v2.vuejs.org/v2/guide/mixins.html

edited Jul 15, 2022 at 0:56

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jan 14, 2021 at 15:53

omerS

8842 gold badges11 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to create reusable functions in Vuejs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related