Vue Composition API + Router Popup component params?


How do you get the router params, when using composition API?
using F7 vue 8.3.0

Example route:

    path: '/product/:id/',
    popup: {
      component: ProductPage
    path: '/product/',
    popup: {
      component: ProductEditPage

Then on one of my pages i have a list of items, that I want to open in popup mode:

      class="search-list searchbar-found"
      <f7-list-item v-for="item in ItemsList"

By the way the href does nothing, really needs to use the “link” prop only that works why?

But then when the popup opens… the route context is not there.

   <f7-view init>
     {{ product }}

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { f7, useStore } from 'framework7-vue'

const props = defineProps(['f7route', 'f7router'])
const products = useStore('products').
const product=ref();

 onMounted(() => {
//get product if passed on the router id 

Any idea how to do it? Thanks

Hey Miguel,
instead to use f7routeR (ending R) try f7route so:


It should work as expected! :+1:

Hum… no it does not work! I’m using composition API, makes a difference?


Ok, found a solution.

Does not make much sense, but using the array notation to declare the prop does not work, as it comes undefined!

const props = defineProps([‘f7route’])

However, using the object notation, it does! Finally!

const props = defineProps({f7route: Object})

1 Like