[Vuejs]-Using independent Vue project within another as node package

by

0👍

Lets try to give you a proper answer.
Imagine you have a npm package with the querying component and the store.
Then, your npm package should export something like (check below) to be able to build a new Vue instance with the store and the component:

import Querying from '[path]/components/Querying'
import store from '[path]/store';

export default {
    QueryingComponent: Querying, store: store
}

The code above should be in the entry point of your webpack.conf. If the entry point is a file named index.js then it should be inside this file.

module.exports = {
entry: resolve('/src/index.js'),
...

In the other side, after you have installed the package, you will have the component and the store available. So that you can instance Vue and render that in another part of the page by just creating a new div with another id in the index.html page.

import components from '[your package]';
const yourStore = components.store;
const yourQueryingComponent = components.QueryingComponent;

new Vue({
  yourStore,
  render: (h) => h(yourQueryingComponent),
}).$mount('#another-app');

Hope that helps!

Leave a comment