Export vuejs components to reuse

Question

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.

src/main.js - connect and configure axios
src/App.vue - I describe the main component of the application (maybe I need to put it in a separate component in the components folder)
src/components/OneDay.vue is the second component that is mainly called src/App.vue several times.
src/mixins/dateHandler.js - several functions common to the two components, which are connected as mixins.

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.

ilnicki010 · Accepted Answer · 2020-01-12 16:45:59Z

4

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/

answered Jan 12, 2020 at 16:45

ilnicki010

2871 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Export vuejs components to reuse

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related