How to isolate reusable small functions in vuejs

Question

I have a function that let's say generates a random string for generating a token. I have this function in my methods:{} and I use it in my div without any problem.

But I am trying to put this function in it's own separate file so I can import it for future use, so I put a functions.js file inside my src like this:

// /src/functions.js
export default {
    // generate tokes
  tokenGenerator () { ... }

}

And in my src/components/foo.vue I am importing this file (no issues with importing)

<template>
 <div> {{ tokenGenerator }} </div>
</template>

<script>
import tokenGenerator from '../../functions'
export default {
   data() {
      return ;
   }
}
</script>

This should work, but it doesn't. Importing is not the issue, but something else.. the console error shows me that It can not find function tokenGenerator

tony19 · Accepted Answer · 2022-07-15 21:02:16Z

5

For one, you seem to be trying to import a single function, but tokenGenerator in your code is a reference to the whole object exported in your functions file.

Secondly, you cannot access plain javascript functions using Vue interpolation {{ ... }}. The template can only reference functions defined as methods on the related Vue instance.

You can use a mixin to do what you want:

// /src/functions.js
export default {
  methods: {
    // generate tokens
    tokenGenerator () { ... }
  }
}

<!>

<template>
  <div>{{ tokenGenerator }} </div>
</template>

<script>
import mixinFuncs from '../../functions'
export default { 
   mixins: [ mixinFuncs ],
}
</script>

Here's the documentation on mixins.

If you simply need access to the tokenGenerator function in your Vue script, then you can export it directly and import it:

// /src/functions.js
// generate tokens
export const tokenGenerator = () => { 
  //... 
}

<!>

<template>
  <div> {{ token }} </div>
</template>

<script>
import { tokenGenerator } from '../../functions'

export default {
  data() {
    return {
      token: tokenGenerator()
    }
  }
}
</script>

Here's a working example.

edited Jul 15, 2022 at 21:02

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Sep 21, 2017 at 15:10

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

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

5 Comments

hidar Over a year ago

I don't think mixins are the only way. If you see at this vuejs code github.com/misterGF/CoPilot/blob/master/src/api/index.js you can see in this file (first line and last) github.com/misterGF/CoPilot/blob/master/src/components/… that it is imported simply the way I have shown. I don't want to use mixins when a simpler and better options is available. Thanks for the answer though

thanksd Over a year ago

That example uses a function from an imported object in a Vue instance's method. If that's what you're trying to do then yes you can definitely just import the function and use it in your script (see my edit). But, if you are trying to use that function in a template, it needs to be set as a method or property of the Vue instance, and the easiest way to do that is via mixins (although you could also do something like in Kumar_14's answer).

For the Name Over a year ago

@hidar Mixins are a powerful pattern for VueJS and are worth the time to learn how to use them well

hidar Over a year ago

Sorry to revoke the accepted mark, but I just tried your answer today and it does not work. I am talking about the second example. I get

vue.esm.js:434 [Vue warn]: Property or method "token" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

error.. maybe something has changed in vue

thanksd Over a year ago

It should definitely work. Are you absolutely sure your data() method is returning an object with a token property and that you aren't using token in the template of another component?

Kumar_14 · Accepted Answer · 2017-09-21 15:51:33Z

1

Export it in this way in functions.js:

export class util {
    static tokenGenerator() {
       //do your stuff here
    }
}

In foo.vue:

<template>
  <div>{{ tokenGenerator }} </div>
</template>

<script>
import { util } from '../../functions';

export default {
  data() {
    return {
       textData: util.tokenGenerator
    }
  } 
}
</script>

answered Sep 21, 2017 at 15:51

Kumar_14

5843 silver badges15 bronze badges

2 Comments

thanksd Over a year ago

You could do something like this but you'd probably want to set a method instead of a data property and you still can't reference tokenGenerator in the template

hidar Over a year ago

This is close enough but as I have mentioned in the comment on the second answer, I think there is a better alternative to this one

Collectives™ on Stack Overflow

How to isolate reusable small functions in vuejs

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related