Vue Component Extensions

Context 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:

Properties
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 or MD): this.$theme.ios and this.$theme.material
this.$f7router	This property only available for components inside of initialized View Framework7 Router Instance. It has a lot of useful Methods & Propserties to use for navigation
this.$f7route	This property only available for components inside of initialized View Object with current route data that was used to load this page, tab or modal. It has the following properties url - route URL path - route path query - object with route query. If the url is /page/?id=5&foo=bar then it will contain the following object {id: '5', foo: 'bar'} params - route params. If we have matching route with /page/user/:userId/post/:postId/ path and url of the page is /page/user/55/post/12/ then it will be the following object {userId: '55', postId: '12'} name - route name hash - route URL hash route - object with matching route from available routes context - context that was passed to the route

Methods Extensions

And there are additional methods will be available on any Vue component:

onF7Ready($f7)	Component method will be executed on/when Framework7 initialized. It is safe to put all Framework7 related logic into this method
onF7RouteChange(newRoute, previousRoute, router)	Component method will be executed on Framework7 route change
onF7RouteChanged(newRoute, previousRoute, router)	Event will be fired on current route change and after page transitions

For example

// Init App
new Vue({
  el: '#app',
  framework7: {
    routes: Routes
  },
  methods: {
    onF7Ready(f7) {
      // do some f7 related logic
      f7.dialog.alert('App initialized');
    }
  }
});

Or in single-file vue component:

<template>
  <f7-page>
    ...
  </f7-page>
</template>
<script>
  export default {
    data() {
      ...
    },
    methods: {
      onF7Ready(f7) {
        // f7 api can be used here
      },
    },
  };
</script>

Page Events Extensions

Framework-Vue plugin also introduces new on Vue component option that can be used in page components to listen for page events:

<template>
  <f7-page>
    ...
  </f7-page>
</template>
<script>
  export default {
    data() {
      ...
    },
    // page events
    on: {
      pageInit(event, pageData) {
        // do something on page init
      },
      pageAfterOut(event, pageData) {
        // do something when page transitioned out of view
      },
    }
  };
</script>