Can VueJS be used to code behavior inside a web component ? I mean: if vuejs library is loaded as script reference can it then be used as in a normal html page but inside the definition of a web component ?
1 Answer
Yes you can wrap vuejs inside a web component you just need .vue files and a helper library from vuejs called https://github.com/vuejs/vue-web-component-wrapper
It's extremely simple to use it!!!
This is the Component.vue file
<template>
<div>
<h1>My Vue Web Component</h1>
<div>{{ msg }}</div>
</div>
</template>
<script>
export default {
props: ['msg']
}
</script>
This is main.js file
import Vue from 'vue';
import wrap from '@vue/web-component-wrapper';
import MyWebComponent from './components/Component'; //this is your component file
const WrappedElement = wrap(Vue, MyWebComponent);
window.customElements.define('my-web-component', WrappedElement);
For more information visit https://medium.com/@royprins/get-started-with-vue-web-components-593b3d5b3200
