vue component to use common functions

Question

I'm looking to get a handle on the Vue CLI3 project system. Currently refactoring a long single html file of in-line vue into real '.vue' components. One goal is to use some common functions among my vue components for various things. In my common-functions.js file I've got something like this:

function capitalize(str) {
    return str[0].toUpperCase() + str.substr(1, );
};

And in my HelloWorld.vue file I've got this and it's not working through many various attempts. All searches I find seem to be dealing with other things, surely there's an easy way to just use some common functions, right??

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
      <li v-for='c in categoryNames'>{{ c }}</li>
    </ul>
  </div>
</template>

<script>

  require('../js/common-functions.js');

  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: capitalize('welcome to Your Vue.js App!'),
        categoryNames : this.$root.categoryNames
      }
    }
  }

</script>

Of course the message is:

[Vue warn]: Error in data(): "ReferenceError: capitalize is not defined"

found in

---> <HelloWorld> at src/components/HelloWorld.vue
       <App> at src/App.vue
         <Root>

akuiper · Accepted Answer · 2018-08-21 16:12:25Z

4

At the end of common-functions.js, export the function:

export default capitalize;

And in the HelloWorld.vue, import it with:

import capitalize from '../js/common-functions.js';
// this should replace the require line

answered Aug 21, 2018 at 16:12

akuiper

216k33 gold badges362 silver badges379 bronze badges

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

1 Comment

Vasily Hall Over a year ago

This method appears to be the basic usage I am looking for, and it works for me. Although I chose the method whereby many functions are exported as part of an object instead of individual ones, I can see how this is useful due to giving js code separate name space. Thanks!

tony19 · Accepted Answer · 2022-07-16 01:35:18Z

One Solution:

Register your global functions to Vue.prototype by Vue.use().

Like below demo:

let myGlobalAPIGroup1 = { // API Group 1
  install: function (_Vue) {
    if(!_Vue.prototype.$apiGroup1) {
      _Vue.prototype.$apiGroup1 = {}
    }
    _Vue.prototype.$apiGroup1.capitalize = function (str) {
      return str[0].toUpperCase() + str.substr(1, );
    }
  }
}

let myGlobalAPIGroup2 = { // API Group 2
  install: function (_Vue) {
    if(!_Vue.prototype.$apiGroup2) {
      _Vue.prototype.$apiGroup2 = {}
    }
    _Vue.prototype.$apiGroup2.capitalize = function (str) {
      return str[0].toUpperCase() + str.substr(1, ) + '@';
    }
  }
}

Vue.use(myGlobalAPIGroup1) //register
Vue.use(myGlobalAPIGroup2) //register

new Vue({
  el: '#app',
  data() {
    return {
      testValues: ['label a', 'label b'],
    }
  },
  methods:{
    testAPI1: function(item) {
      return this.$apiGroup1.capitalize(item)
    },
    testAPI2: function(item) {
      return this.$apiGroup2.capitalize(item)
    }
  }
})

#app > div {
  display: inline-block;
  margin-left: 5px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>
    <h3>Group 1:</h3>
    <p v-for="(item, index) in testValues" :key="index">{{testAPI1(item)}}</p>
  </div>

  <div>
    <h3>Group 2:</h3>
    <p v-for="(item, index) in testValues" :key="index">{{testAPI2(item)}}</p>
  </div>
</div>

Thank you for your answer, it will be very useful for my growing knowledge.

Collectives™ on Stack Overflow

vue component to use common functions

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related