Consuming web components from external sites with requirejs

Overview:

I have a site built with vue.js, Symfony3 and RequireJS. I have main.js

where I include assets and scripts from the Symfony provider folder and resources / shared folders. I also have app.js

which is the main page for vue that displays all components.

Purpose:

My goal is to create a site web component and include it in another site without using an iframe.

Problem:

I walked around the world and could not find the exact recipe for how this is done. I tried to request files using a URL, but since not all Symfony resources are available from a URL, I ran into a number of errors.

Question

How do I make vue.js or any other js framework app reusable from other sites. In other words, I want to include a vue.js app on an external website.

Has anyone done this and has experience? How can this be achieved?

app.js

    define([
    'vue', 
    'text!/bundles/app/js/app.html', 
    'vue-material' ,
    'header', 
    'footer', 
    'frontpage', 
    'signup', 
    'vue-router',
    'routes'
], app);

function app(Vue, template, VueMaterial,  Header, Footer, Frontpage, Signup, VueRouter, AppRoutes) {
    Vue.use(VueMaterial);
    Vue.use(VueRouter);
    Vue.config.productionTip = false;

    let router = new VueRouter({
        mode: 'history',
        routes: AppRoutes
    });

    Vue.material.registerTheme('default', {
      primary: 'grey',
      accent: 'red',
      warn: 'red',
      background: 'white'
    })

    var app = new Vue({
        el: '#app',
        router: router,
        template: template,
        components: {
            home: Frontpage

        },
        data: function() {
            return {
                currentView: 'home'
            }

        }
    });
}

      

        
        
        
      

    

main.js

(function (require) {

    "use strict";

    require.config({
        paths: {
            'vue': '/assets/vendor/vue/dist/vue',
            'text': '/assets/vendor/text/text',
            'http': '/assets/vendor/axios/dist/axios',
            'vue-material': '/assets/vendor/vue-material/dist/vue-material',
            'app':  '/bundles/app/js/app',
            'header': '/bundles/app/js/components/header/header',
            'signup': '/bundles/app/js/components/signup/signup',
            'footer': '/bundles/app/js/components/footer/footer',
            'frontpage': '/bundles/app/js/components/frontpage/frontpage',
            'api': '/bundles/app/js/services/api',
            'routes': '/bundles/app/js/routes',
            'vee-validate': '/assets/vendor/vee-validate/dist/vee-validate.min',
            'vue-router': '/assets/vendor/vue-router/dist/vue-router.min',
            'vue-lang': '/assets/vendor/vue-lang/index',
        }
    });

    require(['app']);

})(window.requirejs);