Skip to content

Failed to resolve... #12

@armenr

Description

@armenr

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

<template>
</template>

<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>

To use this in a parent, I have done:

<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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions