Vue Component Extensions
After Vue mounts the app and init Framework7, we will have access to Framework7’s initialized instance and some other useful properties that will be available in all Vue components:
this.$f7ready | Callback function that will be executed when Framework7 fully intialized. Useful to use in components when you need to access Framework7 API and to be sure it is ready. So it is safe to put all Framework7 related logic into this callback. As an argument it receives initialized Framework7 instance. For example:
|
this.$f7 | Main Framework7’s initialized instance. It allows you to use any of Framework7 APIs |
this.$$ this.Dom7 | Access to built-in Dom7 DOM library that utilizes most edge and high-performance methods for DOM manipulation |
this.$device | Access to Device utilities |
this.$request | Access to Request library for XHR requests |
this.$utils | Access to Utils object with few useful utilities |
this.$theme | Object with boolean properties with information about currently used theme (iOS, MD or Aurora ): this.$theme.ios , this.$theme.material and this.$theme.aurora |
this.$f7router | This property only available for components loaded with router (e.g. pages, routable modals, routable tabs). If you need to access this property in “deeper” child components, then you need to pass it down using props. Framework7 Router Instance. It has a lot of useful Methods & Properties to use for navigation |
this.$f7route | This property only available for components loaded with router (e.g. pages, routable modals, routable tabs). If you need to access this property in “deeper” child components, then you need to pass it down using props. Object with current route data that was used to load this page, tab or modal. It has the following properties
|
If you use functional components, then previously described extensions will not work. Framework7 instance, f7ready
method and theme
can be imported directly from Framework7-Vue library. Device, Request and Support can be imported directly from Framework7 core library.
import { Device, Request, Support } from 'framework7';
import { f7, f7ready, theme } from 'framework7-vue';
<template>
...
</template>
<script>
import { f7, f7ready } from 'framework7-vue';
export default {
...
mounted() {
f7ready(() => {
f7.dialog.alert('Component mounted');
})
},
};
</script>