Initialize App

After we have our app layout now we need to mount Svelte components and initialize the app. You can read about all possible Framework7 initialization parameters in appropriate Framework7 App Parameters section.

We have the following HTML structure in our index file:

  1. <!-- index.html -->
  3. <!DOCTYPE html>
  4. <html>
  5.   <head>
  6.     <!-- ... metas and styles ... -->
  7.     <link rel="stylesheet" href="path/to/framework7.bundle.min.css">
  8.   </head>
  9.   <body>
  10.     <!-- App Root Element -->
  11.     <div id="app"></div>
  12.     <script type="text/javascript" src="path/to/app.js"></script>
  13.   </body>
  14. </html>

In addition, if you’re using Rollup or Webpack, you might typically have a root-level app.js or index.js file that mounts your root app component:

  1. // app.js
  3. // Import F7 Bundle
  4. import Framework7 from 'framework7/framework7-lite.esm.bundle.js';
  6. // Import F7-Svelte Plugin
  7. import Framework7Svelte from 'framework7-svelte';
  9. // Init F7-Svelte Plugin
  10. Framework7.use(Framework7Svelte);
  12. // Import Main App component
  13. import App from './App.svelte';
  15. // Mount Svelte App
  16. const app = new App({
  17.   target: document.getElementById('app'),
  18. });

Your root App.svelte component will typically have a top-level Framework7App component. This component is used to configure your app:

  1. <!-- App.svelte -->
  2. <!-- Main Framework7 App component where we pass Framework7 params -->
  3. <App params={f7params}>
  4.   <!-- initial page is specified in routes.js -->
  5.   <View main url="/" />
  6. </App>
  8. <script>
  9.   import { App, View, Page, Navbar, Toolbar, Link } from 'framework7-svelte';
  10.   import routes from './routes.js';
  12.   const f7params = {
  13.     // Array with app routes
  14.     routes,
  15.     // App Name
  16.     name: 'My App',
  17.     // App id
  18.     id: 'com.myapp.test',
  19.     // ...
  20.   };
  22. </script>

In the examples above:

  • we pass Framework7 parameters to the App main Framework7 app component in its params property;
  • root element used as App target (document.getElementById('app')) will be used as Framework7 root element

We also must specify array with routes (if we have navigation between pages in the app). Check out information about Svelte Component Extensions, router and routes in the Navigation Router section.

← App Layout

Svelte Component Extensions →