Vuidget

This project is dedicated to all Vue.js developers who tried to embed their application as an external widget and failed, or to those who wish to do so but lack the resources.

It shows how to use advanced Vue.js application as an embeddable HTML widget - meaning an app that contains store, routes, actions, mutations, socket, i18n - simply whatever you choose. Anything used in a traditional single-page application can be used the same way here.

Example of a code in main.js

Before widget setup

new Vue({
  sockets: sockets,
  i18n: i18n.init(lang, translations, CONST.FALLBACK_LOCALE),
  el: '#app',
  render: h => h(App),
  store,
  router
})
      

After widget setup

App.sockets = sockets
App.i18n = i18n.init(lang, translations, CONST.FALLBACK_LOCALE)
App.router = router
App.store = store
Vue.customElement('my-widget', App)
      

<link href="https://vuidget-source.danajanoskova.sk/css/app.css" rel=stylesheet/>

<vue-widget title="Vuidget live example"></vue-widget>

<script src="https://vuidget-source.danajanoskova.sk/js/app.js"></script>