akxcv/vuera

Didn't work at all with React components library

Open

#67 opened on Oct 29, 2018

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (264 forks)batch import
bughelp wanted

Repository metrics

Stars
 (4,260 stars)
PR merge metrics
 (No merged PRs in 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>

Contributor guide