So we have this f7navbar which I’d like to put inside a VueComponent so I can reuse it easily, however when I place it into the template say in… navbar.vue and I try to call that component in a page it won’t show.
<template>
<!-- Navbar.vue -->
<f7-navbar :sliding="false" large>
<f7-nav-left>
<f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
</f7-nav-left>
<f7-nav-title sliding>SISSA</f7-nav-title>
<f7-nav-right>
<f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="right"></f7-link>
</f7-nav-right>
<f7-nav-title-large sliding>SISSA</f7-nav-title-large>
</f7-navbar>
</template>
<script>
import routes from '../js/routes.js';
export default {
data() {
return {
}
},
methods: {
alert(){
console.log("Alert");
}
},
mounted() {
}
}
</script>
I import it and declare it as component on home.vue and try to all however it won’t show.
I tried it also with the Toolbar and for some reason it does appear, however it won’t position properly at the bottom of the view, so I’m having trouble using the f7 components as vue components.
I find it easier on vuecomponents since if there’s a change I can change it in one file and that’s it.