VueJS Abstracting your imports

Sometimes the easiest way to build software is tightly coupled: All your code in one place. But often, as a project evolves, you want to extract pieces here and there into component libraries.

However, of you've been importing your local components like do: import MyAwesomeComponent from './components/awesome/MyAwesomeComponent, you're going to need to change that in a few places.

One way you can avoid this problem is to use a proxy class for importing (I think you can also solve this with plugins btw).

proxy.js


/*
 * A proxy class for importing things which might later come from a different place
 */
import store from '../../store'
import {API} from '../../store/api'

export default {
  store: store,
  api: API
}

Then, to use this; you just do:

import proxy from './proxy'
let store = proxy.store

Menu