Framework7 Vueのパッケージ構造

パッケージ

Framework7 Vueのパッケージには、以下のファイルとフォルダが含まれています。

framework7-vue/
    bundle/
    cjs/
      components/
        accordion.js
        accordion-content.js
        ...
      framework7-vue-bundle.js
      framework7-vue.js
    components/
        accordion/
          package.json
        accordion-item/
          package.json
        ...
    esm/
      components/
        accordion.js
        accordion-content.js
        ...
      framework7-vue-bundle.js
      framework7-vue.js

Vueプラグイン

ES/CJSモジュールとして提供されるFramework7 Vueプラグインです。

// Import Framework7 Core
import Framework7 from 'framework7/lite';
/*
Or import bundle with all components:
import Framework7 from 'framework7/lite-bundle';
*/

// Framework7 Vueのインポート
import Framework7Vue from 'framework7-vue';

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

<template>
  <f7-app>
    <f7-view>
      ...
    </f7-view>
  </f7-app>
</template>
<script>
import { f7App, f7View } from 'framework7-vue';

export default {
  components: {
    f7App,
    f7Navbar,
  },
  ...
}
</script>

バンドル

すべてのFramework7-Vueコンポーネントを含める必要がある場合は、すべてのVueコンポーネントが登録された別のスクリプトバンドルを含めることができます。

// Vueのインポート
import { createApp } from 'vue';

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

// Framework7-Vueをインポートして、すべてのコンポーネントを登録するヘルパーを追加します。
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle';

// メインアプリのコンポーネントをインポートします。
import App from 'path/to/app.vue';

// プラグインの初期化とすべてのコンポーネントの登録
Framework7.use(Framework7Vue);

// Vueアプリの作成
const app = createApp(App);

// Vueアプリのインスタンスを渡して、すべてのFramework7 Vueコンポーネントを登録します。
registerComponents(app);