akxcv/vuera

Didn't work at all with React components library

Aberta

#67 aberto em 29 de out. de 2018

 (1 comentário) (0 reação) (0 responsável)JavaScript (240 forks)batch import
bughelp wanted

Métricas do repositório

Stars
 (4.286 estrelas)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

Description

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>

Guia do colaborador