Component without template

I have a bit of code that makes an api call to a server and returns some JSON.

It did exist as a method in my component but as it is getting a bit long I want to extract it to it's own file

In vuejs what is the best practice here.

  • should it be a component without a template? How would this work?

  • will I just create an es6 module?

2 answers

  • answered 2018-04-17 05:48 skribe

    I would suggest using a mixin here.

    In a file like myCoolMixin.js define your mixin...

    export default {
       methods:{
          myAwesomMethod(){
             //do something cool...
          }
       }
    }
    

    You can define anything in a mixin just like a component. e.g. data object, computed or watched properties, etc. Then you simply include the mixin in your component.

    import myCoolMixin from '../path/to/myCoolMixin.js'
    
    export default{
       mixin:[myCoolMixin],
       data: function(){
          return: {
             //... 
          }
        },
        mounted: function(){
           this.myAwesomeMethod(); // Use your method like this!  
        }
     }
    

    More on Mixins here: https://vuejs.org/v2/guide/mixins.html

  • answered 2018-04-17 05:48 DigitalDrifter

    Mixins work, or you could create a plugin. Here's the docs example:

    MyPlugin.install = function (Vue, options) {
      // 1. add global method or property
      Vue.myGlobalMethod = function () {
        // something logic ...
      }
    
      // 2. add a global asset
      Vue.directive('my-directive', {
        bind (el, binding, vnode, oldVnode) {
          // something logic ...
        }
        ...
      })
    
      // 3. inject some component options
      Vue.mixin({
        created: function () {
          // something logic ...
        }
        ...
      })
    
      // 4. add an instance method
      Vue.prototype.$myMethod = function (methodOptions) {
        // something logic ...
      }
    }
    

    Vue Plugins