Custom Vue library component with <router-link>, how to synchronize router state?

Question

I am attempting to create a re-usable navigation component, that uses vue-router <router-link> to navigate. The specific navigation elements also change styles based on active links.

If I import this component "raw", as in the .vue file, this works fine and the router state is synchronized and the links work.

However if I build my components and export them as a library (using webpack), my routes stop working. All the other features of the component work, scripts, events, properties, styles and such.

Would this be a problem with my webpack build config, or do I need to pass in some type of property that can link together the state of my application to my component?

Solvemon Solvemon · Accepted Answer · 2018-04-24T09:17:16

So, I found out how to do this the right way. It wasn't as much a problem of syncing state, but more that I was exporting my components in a "dumb" way, not connected to my consuming App:

export default {
  MyNavComponent,
  AnotherComponent,
  ...
}

To fix this, I converted my component library to work as a plugin instead:

const components = {
  MyNavComponent,
  AnotherComponent,
  ...
};

//Export in the form of a plugin instead
export default {
  install: function (Vue) {
    console.log('Installing vue components!');

    _.each(components, function (component) {
      Vue.component(component.name, component);
    });
  }
};

And then in my consuming app:

import MyComponents from 'my-component-package/dist/components.min'

Vue.use(MyComponents)

new Vue({....})

And my router-links now work flawlessly!

Custom Vue library component with <router-link>, how to synchronize router state?

1 Answers