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
  }
}


separate code vueseparate logic vuevuevuejs

Latest

A

Auto scroll to a specify element every time open webpage by Javascript

H

How to scroll to top every time React router change?

G

Get height or width of an element in Javascript

C

Convert HTML raw string to DOM Nodes in Javascript

P

Pass the value of only one argument that you don't want to change the value of the rest argument

Related

C

Create a Vuejs login page use Vuetify template and validate with vee-validate

T

The way to import a helper function into the Vuejs template

H

How to add Google AdSense to a Vuejs app?

H

How to call the Mutations from inside the different Modules in Vuejs?

C

Create the Tooltip Component in Vuejs

© 2019 4codev

Created with love by Sil.