vuera
vuera copied to clipboard
Didn't work at all with React components library
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>
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.