Router Component Files

Each BookNest page is a router component in one .f7 file: a <template> with the markup as a tagged template literal, an optional <style>, and a <script> whose default export receives (props, context) and ends with return $render. The context carries $f7, $f7route, $f7router, $store, $h, $update and the lifecycle hooks. The browser never parses the file: rollup-plugin-framework7 compiles it when Vite 25,978 serves or bundles it, as the dev server's copy of notes.f7 shows:

Fetching the compiled notes page from the Vite dev serverShell

curl -s "http://localhost:5196/pages/notes.f7?import" | grep -v sourceMappingURL

Output

function framework7Component() {
  return function ($ctx) {
      var $h = $ctx.$h;
      ...
      var $f7route = $ctx.$f7route;
      ...
        <div class="title">Notes on book ${$f7route.params.id}</div>
    ...
framework7Component.id = '85d3d7c36e';
export default framework7Component;

return $render became a render function that unpacks the context, so a template can use $f7route without importing it; the id is random on every compile. Instead of component, a route can use asyncComponent: () => import('./page.f7') for a lazily loaded chunk, componentUrl for an .f7 file compiled in the browser, url for a plain HTML file, content for an HTML string, or el for a page already in the DOM. With a bundler, prefer the first two.

MENU