Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Expose Vue component to outside projects

I am trying to explore how to expose my Vue component to other projects without publishing to NPM.

I am able to find the below link which shows how to publish a Vue component to NPM : how-to-publish-your-vue-js-component-on-npm-62b67dfb3e58

But I don't want to publish to NPM. Instead, I want to use the created component in another local project.

like image 465
Frontend developer Avatar asked Jan 18 '18 09:01

Frontend developer


People also ask

How do I use Vue components in another project?

Build the component in isolation- no configurations. Publish the component from the project; and nothing else. Install the component in another project with npm/yarn. Modify the code right from the new project using Bit and update the changes as a new version- no context switching.

How do I render my Vue component?

The best way to force Vue to re-render a component is to set a :key on the component. When you need the component to be re-rendered, you just change the value of the key and Vue will re-render the component.


1 Answers

You can have a private repository in you package.json

So the library with .vue components

{
  "name": "my-package-with-components",
  "version": "1.0.0",
  "files": [
    "lib/js/components/**.vue"
  ]
}

In the project where you want to use those components

{
   "devDependencies": {
      "my-package-with-components": "git+ssh://git@my/repo.git#master",
   }
}

In you application script you can import the .vue files

import SpecialComponent1 from 'my-package-with-components/lib/js/components/SpecialComponent1.vue';
import SpecialComponent2 from 'my-package-with-components/lib/js/components/SpecialComponent2.vue';

Vue.component('special-component-1', SpecialComponent1);
Vue.component('special-component-2', SpecialComponent2);

You can load a library in NPM from a directory with npm link

cd mylib/ && npm link
cd ../myapp && npm link mylib
like image 159
Sander Visser Avatar answered Nov 01 '22 20:11

Sander Visser