vuera icon indicating copy to clipboard operation
vuera copied to clipboard

Didn't work at all with React components library

Open DenisNP opened this issue 5 years ago • 1 comments

Hello there! I am trying to use VKUI React-library in my Vue application.

Here is my App.vue:

<template>
  <VKView id="main" activePanel="panel">
    <Panel id="panel">
      test
    </Panel>
  </VKView>
</template>

<script>

import {View, Panel} from "@vkontakte/vkui";

export default {
  name: 'app',
  components: {
    "VKView": View,
    "Panel": Panel
  }
}
</script>

And this is my main.js:

import Vue from 'vue'
import App from './App.vue'

import { VuePlugin } from 'vuera';
Vue.use(VuePlugin);

import '@vkontakte/vkui/dist/vkui.css';

new Vue({
  render: h => h(App)
}).$mount('#app')

Everything builds and runs without errors, but result DOM tree have no children in each component, so I just got empty white page:

<section class="View View--ios View--header">
  <div class="View__header">
    <div class="View__header-scrolltop"></div>
    <div class="PanelHeader PanelHeader--ios"></div>
  </div>
  <div class="View__panels"></div>
</section>

And this is how it should look:

<section class="View View--ios View--header" id="main">
  <div class="View__header">
    <div class="View__header-scrolltop"></div>
    <div class="PanelHeader PanelHeader--ios">
      <div class="PanelHeader__in PanelHeader__in--active">
        <div id="header-bg-panel" class="PanelHeader__bg"><!----></div>
        <div class="PanelHeader__container">
          <div class="PanelHeader__left">
            <div id="header-left-panel" class="PanelHeader__left-in"><!----></div>
            <div id="header-addon-panel" class="PanelHeader__addon"><!----></div>
          </div>
          <div id="header-title-panel" class="PanelHeader__content"><!----></div>
          <div id="header-right-panel" class="PanelHeader__right"><!----></div>
        </div>
      </div>
    </div>
  </div>
  <div class="View__panels">
    <div class="View__panel View__panel--active">
      <div class="View__panel-in">
        <div id="panel" class="Panel Panel--ios Panel--tm-gray">
          <div class="Panel__in">
            <div class="Panel__in-before"></div>
              test
            <div class="Panel__in-after"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

DenisNP avatar Oct 29 '18 23:10 DenisNP

Hi! Sorry for the late reply. I don't have a lot of time (and energy) to debug these issues, so I would be very glad to get some help with this.

akxcv avatar Dec 03 '18 00:12 akxcv