Open armenr opened 3 years ago
Gonna answer my own question and leave this here for anyone else who ever has the question (or to be used as another code example):
@/components/VueReact.vue
<script lang="ts">
import { Vue, Options } from 'vue-class-component'
import ReactPlayer from 'react-player'
import { h } from 'vue'
import { toVue } from '@egoist/react-to-vue'
const VueReactPlayer = toVue(ReactPlayer)
// console.log('VUE REACT PLAYER ', VueReactPlayer)
@Options({ name: 'VueReact' })
export default class VueReact extends Vue {
render() {
return h(VueReactPlayer)
}
}
</script>
@/pages/Index.vue (or some other "parent" component: e.g. View/Layout/Page):
<template>
<q-page class="row items-center justify-evenly">
<vue-react
url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
/>
</q-page>
</template>
<script lang="ts">
import { Vue, Options } from 'vue-class-component'
import VueReact from '@components/VueReact.vue'
@Options({
components: { VueReact }
})
export default class PageIndex extends Vue {
}
</script>
Hi there! Thanks for putting this library together! I seem to be using this incorrectly, however, so would appreciate any guidance.
For what it's worth, I'm suing Quasar v2 (vue 3) + TypeScript.
The React library I'm trying to wrap is:
https://www.npmjs.com/package/react-player
What would be the right way of trying to do the absolute simplest version of this? :)
file: /components/ReactPlayerVue.vue
To use this in a parent, I have done: