Hi all,
I’m developing a new app with Vue and F7 all work fine but console log showme this warning:
[Vue warn]: Invalid VNode type: undefined (undefined)
at <AsyncComponent key="1636361956288_1" >
at <F7View url="/" main=true class="safe-areas" >
at <F7App id="xxx" name="xxx" theme="auto" ... >
at <App>
And Vue tools showme this:
routes.js
var routes = [
{
path: '/',
name: 'Dashboard',
asyncComponent: () => import('../pages/dashboard.vue'),
beforeEnter: [checkAuth, checkPermission]
},
{
path: '/login/',
name: 'Login',
asyncComponent: () => import('../pages/login.vue'),
beforeEnter: [checkLogin],
},
{
path: '(.*)',
redirect: '/errors/404/',
},
];
export default routes;
app.js
<f7-app v-bind="f7params">
<f7-view url="/" :main="true" class="safe-areas"></f7-view>
</f7-app>
</template>
<script>
import { onMounted } from 'vue';
import { f7ready } from 'framework7-vue';
import routes from './router/routes.js';
export default {
setup() {
const f7params = {
id: 'xxx',
name: 'xxx',
theme: 'auto',
routes: routes,
serviceWorker: process.env.NODE_ENV === 'production' ? {
path: '/service-worker.js',
} : {},
};
onMounted(() => {
f7ready(() => {
});
});
return {
f7params
}
}
}
</script>