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

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>