The way to separate logic code of the Vuejs component into smaller files

With a huge component, we need to saparate that component into smaller files (data, methods, computed...) and import in to the main file to easy to develop like this:

Data:

// data.js
export default function() {
  return {
  	// xyz
  }
}


Methods:

 // methods.js
export default {
  methodA () {
    // xyz
  },
  methodB () {
    // xyz
  }
  //...
}


Computed:

// computed.js
export default {
  aComputed() {
    // xyz
  },
  bComputed() {
    // xyz
  },
}


Import into component:

// component.vue
import methods from './methods';
import data from './data';
import computed from './computed';

export default {
  data,
  methods: {
   ...methods,
   // local methods
  },
  computed: {
  	...computed,
    // local computed
  }
}


© 2019 4codev

Created with love by Sil.