Updated tutorials >= v8.3

I am new to f7 and trying to find an updated guide for recent version of f7
The documentations are great but they don’t show all the use cases i’m looking for.

Currently, i’m using async for a page
import Api from “…/lib/api.js”;

export const singleMedia = ({ router, to, resolve }) => {
let app = router.app;

// Show Preloader

let type = to.path.includes(‘show/’) ? ‘tv’ : ‘movie’;

Api.get(type + “/” + to.params.media_id, {
success: function (response) {
const media = response.data;

      componentUrl: './pages/single-media.f7',
      props: {
finally: function() {


In my component page, after

export... I'm trying to make http requests after the component has been loaded. I want to use Api from "../lib/api.js" instead of fetch I can't import inside the component for some reason, if i add it brings an error I would appreciate any help or links to existing project that uses the newer versions Thank you

to mention, i’m not using vite or web pack, just regular html

I already solved this with vite.

You can’t use import in the component if it’s being called with xhr (componentUrl)

Hello michael_a. Me what i know to import modules in a router component you need to install webpack and the Framework 7 loader plugin GitHub - framework7io/framework7-loader and then follow the steps here
Router Component | Framework7 Documentation
Thanks unless you meant something else.

1 Like

that’s what i meant. Thank you

Well try the steps.

  1. Install webpack from https://webpack.js.org/. I for one was not using it in the first place but later I learnt of the amazing things webpack could do and never looked back.
    Follow the webpack docs on how to install and configure webpack in your project.
    2.Install Framework 7 loader plugin from GitHub - framework7io/framework7-loader.
    Please follow the docs on the plugin
    More details here Router Component | Framework7 Documentation