akxcv/vuera

Didn't work at all with React components library

Aperta

#67 aperta il 29 ott 2018

 (1 commento) (0 reazioni) (0 assegnatari)JavaScript (240 fork)batch import
bughelp wanted

Metriche repository

Star
 (4286 stelle)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

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>

Guida contributor