Skip to main content
Version: v8

トラブルシューティング

This guide covers some of the more common issues you may run into when developing with Ionic Vue.

Have an issue that you think should be covered here? Let us know!

Failed to resolve component​

[Vue warn]: Failed to resolve component: ion-button

この警告が表示された場合、@ionic/vueからコンポーネントをインポートしていない可能性があります。デフォルトでは、すべての Ionic Vue コンポーネントはローカルに登録されているため、使用するたびにインポートする必要があります。

Without importing the component, you will only get the underlying Web Component, and Vue-specific features such as v-model will not work.

To resolve this issue, you need to import the component from @ionic/vue and provide it to your Vue component:

<template>
  <ion-button>Hello World</ion-button>
</template>

<script setup lang="ts">
import { IonButton } from '@ionic/vue';
</script>

Prefer to register your components globally once? We have you covered. Our Optimizing Your Build Guide shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach.

Slot attributes are deprecated​

`slot` attributes are deprecated  vue/no-deprecated-slot-attribute

The slots that are used in Ionic Vue are Web Component slots, which are different than the slots used in Vue 2. Unfortunately, the APIs for both are very similar, and your linter is likely getting the two confused.

All Ionic Vue starters ship with this rule turned off, but you can do it yourself by adding the following to your .eslintrc.js file:

module.exports = {
  rules: {
    'vue/no-deprecated-slot-attribute': 'off',
  },
};

If you are using VSCode and have the Vetur plugin installed, you are likely getting this warning because of Vetur, not ESLint. By default, Vetur loads the default Vue 3 linting rules and ignores any custom ESLint rules.

この問題を解決するには、vetur.validation.template: falseで Vetur のテンプレート検証をオフにする必要があります。詳細については、Vetur Linting Guideを参照してください。

Method on component is not a function​

In order to access a method on an Ionic Framework component in Vue, you will need to access the underlying Web Component instance first:

// ✅ This is correct
ionContentRef.value.$el.scrollToBottom();

// ❌ This is incorrect and will result in an error.
ionContentRef.value.scrollToBottom();

In other framework integrations such as Ionic React, this is not needed as any ref you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs.

詳細については、Quickstart Guideを参照してください。

Page transitions are not working​

In order for page transitions to work correctly, each page must have an ion-page component at the root:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Home</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">Hello World</ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
</script>

詳細については、IonPage ドキュメントを参照してください。

Ionic events bound in JavaScript are not firing​

When creating event listeners in JavaScript (i.e. addEventListener), event names should be written as kebab-case:

const modal = await modalController.create({
  component: Modal
});

modal.addEventListener('ion-modal-did-present', () => {
  ...
});

await modal.present();

This is done to align with how developers bind events in their Vue templates by using kebab-case: https://vuejs.org/guide/essentials/component-basics.html#case-insensitivity

Capacitor ネイティブビルドでの白い空白画面​

アプリがブラウザ上では正しく動作するが、Capacitor の iOS や Android ビルドで起動すると白い空白画面が表示される場合、最も一般的な原因はvite.config.js内のデフォルトでないbase（またはレガシー Vue CLI プロジェクトではvue.config.js内のpublicPath）です。

このオプションは、アプリを GitHub Pages のようなサブディレクトリからホストできるようにするために追加されることがよくあります。

// vite.config.js
export default defineConfig({
  base: '/my-repo/',
});

Capacitor では、バンドルされたアセットはローカルオリジン（デフォルトでは iOS ではcapacitor://localhost、Android ではhttps://localhost）から提供されるため、プレフィックス付きのパスは解決されず、アプリのブートストラップに失敗します。

これを修正するには、npx cap copyを実行する前に、baseを/にリセットする（またはオプションを削除する）必要があります。

// vite.config.js
export default defineConfig({
  base: '/',
});

両方のターゲットが必要な場合は、それぞれのために別々の設定ファイルを用意し、ビルド時にvite build --configで選択してください。

これが原因であることを確認するには、接頭辞付きのアセットパスでの 404 をデバイスログで確認してください:

  • Android: コマンドラインから adb logcat を実行するか、Android Studio で Logcat を開きます。
  • iOS: Safari の Develop メニューを開き、Simulator またはデバイスの WebView を検査します。

Contents

Edit this page