CODEWITHSUNDEEP
javascriptvue.jsvue-componentvue-cli
Teretto
Teretto

Reputation: 655

Export vuejs components to reuse

I created an api. And for him, I created a one-page interface using vuecli. My plans are to embed it in the projects I need. The question is what needs to be done to export the written application and reuse it where necessary?

The structure of the project is shown in the screenshot.

enter image description here

I have not modified any other files. How can I prepare this correctly so that I can connect these components to my other applications using composer? I connect, configure some variables (api address, for example) and display it in the right place on the page - this is how I see it.

Upvotes: 3

Views: 737

Answers (1)

ilnicki010
ilnicki010

Reputation: 287

You can try to create a web component using VUE CLI 3 to use it later in a different code base. Just make sure your main.js file looks like this 

import Vue from 'vue';
import wrap from '@vue/web-component-wrapper';
import VueWebComponent from './components/VueWebComponent';

const CustomElement = wrap(Vue, VueWebComponent);

window.customElements.define('my-custom-element', CustomElement);

and build it using vue-cli-service build with --target wc

You can read more precise instructions there: https://github.com/vuejs/vue-web-component-wrapper https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/

Upvotes: 4

Related Questions