CODEWITHSUNDEEP
javascriptvue.jsweb-component
Gabriel Luca
Gabriel Luca

Reputation: 215

Can vuejs be used inside webcomponent?

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 ?

Upvotes: 1

Views: 105

Answers (1)

Bhavya Singh
Bhavya Singh

Reputation: 311

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

Upvotes: 2

Related Questions