アプリの初期化

アプリのレイアウトを作成したら、今度はVueコンポーネントをマウントしてアプリを初期化する必要があります。Framework7の初期化パラメータについては、適切なFramework7 App Parametersのセクションで読むことができます。

WebpackやRollup、またはES-nextモジュールをサポートする他のバンドルラーを使用していると仮定すると、以下のような構造になります。

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <!-- ... メタとスタイル ... -->
    <link rel="stylesheet" href="path/to/framework7-bundle.min.css">
  </head>
  <body>
    <!-- アプリのルート要素 -->
    <div id="app"></div>

    <!-- スクリプトが自動注入される -->
  </body>
</html>

/* my-app.js */

import { createApp } from 'vue'

// F7バンドルのインポート
import Framework7 from 'framework7/lite-bundle'

// F7-Vue Plugin Bundleをインポートします（F7コンポーネントがすべて登録されています）。
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle'

// F7-Vueプラグインの初期化
Framework7.use(Framework7Vue);

// メインアプリコンポーネントのインポート
import App from './app.vue';

// アプリの初期化
const app = createApp(App);

// すべてのFramework7 Vueコンポーネントの登録
registerComponents(app);

// Vueアプリの実装
app.mount('#app');

<!-- app.vue -->

<template>
  <!-- メインのFramework7 Appコンポーネントで、Framework7のパラメータを渡します。 -->
  <f7-app v-bind="f7params">
    <!-- 初期ページはroutes.jsで指定する -->
    <f7-view main url="/"></f7-view>
  </f7-app>
</template>
<script>
  import routes from './routes.js';

  export default {
    data() {
      return {
        // <f7-app>コンポーネントに渡すFramework7パラメータ
        f7params: {
          // アプリのルートを持つ配列
          routes,
          // アプリ名
          name: 'My App',
          // アプリのID
          id: 'com.myapp.test',
          // ...
        }
      }
    }
  }
</script>

上記の例では

Framework7 パラメータを、f7-app メインのFramework7 アプリコンポーネントのプロパティに渡しています。
VueのcreateAppに渡されたルート要素は、Framework7のルート要素として使われます。

また、(アプリ内のページ間のナビゲーションがある場合)ルートで配列を指定しなければなりません。Vue Component Extensions、ルーターとルートについての情報は、Navigation Routerのセクションで確認してください。