Framework7 Vue

Framework7 572,986 Vue 5,482 (framework7-vue, 9.1.3) supports Vue 3.5 here. main.js imports Framework7Vue, { registerComponents } from framework7-vue/bundle, calls Framework7.use(Framework7Vue), then registerComponents(app) so that <f7-app>, <f7-page>, <f7-list> and the rest work in any template. App.vue is <f7-app v-bind="f7params"><f7-view main url="/" /></f7-app> with the same routes. The book page shows how route data arrives:

<script setup>
  import { f7, useStore } from 'framework7-vue';
  const props = defineProps({ f7route: Object, f7router: Object });
  const books = useStore('books');
  const book = books.value.find((b) => b.id === Number(props.f7route.params.id));
  const add = () => {
    f7.store.dispatch('addToCart', book.id);
    props.f7router.back();
  };
</script>

The router passes f7route and f7router as props; declare them with defineProps. Here useStore() returns a Vue ref. In Chrome 1 , tapping Salt and Saffron and then Add to cart took each demo back to a catalog reading "1 in cart".