@web-widget/web-widget-vue
v0.0.1-beta2.0
Published
a web-widget plugin for vue.js applications
Downloads
6
Readme
web-widget-vue
Generic lifecycle hooks for Vue.js applications that are registered as applications of web-widget.
Installation
The web-widget-vue will get everything set up.
npm install --save @web-widget/web-widget-vue
Alternatively, you can use @web-widget/web-widget-vue by adding <script src="https://unpkg.com/@web-widget/web-widget-vue"></script>
to your HTML file and
accessing the WebWidgetVueAdapter
global variable.
Usage
import createAdapter from '@web-widget/web-widget-vue';
export default createAdapter({...});
Vue 2
For Vue 2, change your application's entry file to be the following:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import createAdapter from '@web-widget/web-widget-vue';
export default createAdapter({
Vue,
vueOptions: {
render(h) {
return h(App);
},
router,
},
});
Vue 3
For Vue 3, change your application's entry file to be the following:
import { h, createApp } from 'vue';
import App from './App.vue';
import router from './router';
import createAdapter from '@web-widget/web-widget-vue';
export default createAdapter({
createApp,
vueOptions: {
render() {
return h(App, {
// name: this.name
});
},
},
handleInstance: (app) => {
app.use(router);
}
});
Options
All options are passed to web-widget-vue via the opts
parameter when calling createAdapter(opts)
. The following options are available:
Vue
: (required) The main Vue object, which is generally either exposed onto the window or is available viarequire('vue')
import Vue from 'vue'
.vueOptions
: (required) An object or async function which will be used to instantiate your Vue.js application.vueOptions
will pass directly through tonew Vue(vueOptions)
. Note that if you do not provide anel
to vueOptions, that a div will be created and appended to the DOM as a default container for your Vue application. WhenvueOptions
is an async function, it receives the Web Widget application props as an argument.loadRootComponent
: (optional and replacesvueOptions.render
) A promise that resolves with your root component. This is useful for lazy loading.handleInstance
: (optional) A method can be used to handle Vue instance. Vue 3 brings new instance API, and you can access the app instance from this, likehandleInstance: (app, props) => app.use(router)
. For Vue 2 users, a Vue instance can be accessed. ThehandleInstance(app, props)
function receives the instance as its first argument, and Web Widget application props as its second argument. If handleInstance returns a promise, web-widget-vue will wait to resolve the app / parcel'smount
lifecycle until the handleInstance promise resolves.
To configure which dom element the Web Widget application is mounted to, use vueOptions.el:
const vueLifecycles = createAdapter({
Vue,
vueOptions: {
render: h => h(App),
el: '#a-special-container',
},
});
To configure options asynchronously return a promise from vueOptions function:
const vueLifecycles = createAdapter({
Vue,
async vueOptions() {
return {
router: await routerFactory(),
render: h => h(App)
}
},
});