# よくある質問（FAQ）

特定の問題で行き詰っていますか？ チケットを作成する前に、これらの一般的な落とし穴のいくつかを確認してください。 それでも探しているものが見つからない場合は、GitHubでissueを提出するか、コミュニティ で質問してみてください。

# 目次

# Questions

ここにある質問をお持ちですか? Discordコミュニティ で教えていただくか、 Issue Generator でリクエストを作成してください。

  • Vuetify v3 はいつリリースされますか？

    GitHub で進捗状況をフォローするか、 ロードマップ で今後の展望を確認してください。


  • Sass / scss エラーが原因でアプリケーションがコンパイルされません。

    sass-loader バージョンに従って適切な options オブジェクトを使用し、webpack が正しく設定されていることを確認します。 詳細は webpack install のセクションを参照してください。


  • Search Vuetifyが正常に動作しないのはなぜですか？

    現時点では、Algolia docsearchは主要なプロダクションサイトをクロールします: https://vuetifyjs.com/.



  • Error: Cannot find module ‘node-sass’.

    package.json にある @vue/cli-* パッケージが少なくとも ^3.5.0 であることを確認してください。


  • Invalid CSS after @content: expected “}”, was “($material-light);”.

    package.json で node-sass の代わりに sass を使用していることを確認してください。


  • 私のアプリケーションが動作しません。

    まず、Vue.jsとVuetifyの最新バージョンを使用していることを確認してください。 以下の テンプレート を使って codepen で再現してみてください。 通常、環境外で問題を再現できない場合は、問題はローカルに存在することを意味します。 それでも問題を解決できない場合、コミュニティにcodepenを提供し、適切なヘルプチャンネルで問題を解決してください。


  • I’m seeing $attrs is readonly and/or $listeners is readonly in the console

    VuetifyはTypescriptを利用しており、現在Vueオブジェクトをimport およびextendする必要があります。 This has the potential in some applications to generate a warning messages. There is currently an ongoing GitHub discussion with potential work-arounds in a variety of use-cases.


  • **ターミナルでエラーが表示されます。 Error in ./node_modules/vuetify/src/dir/file.js Module parse failed: Unexpected token (<lineno>:<characterno>) **

    IntelliJ IDEA や WebStorm などの IDE を使用している場合、使用するコンポーネントの vuetify/src ディレクトリを指す自動インポートが追加されることがよくあります。 import 文のパスを vuetify/src から vuetify/lib に変更します。



  • Vuetifyコンポーネントを拡張するにはどうすればいいですか?

    Vuetifyコンポーネントは、vueで extends オプションを使用することで簡単に拡張できます。 Codepen Example

// src/components/ActivateBtn
import { VBtn } from 'vuetify/lib'

export default {
  extends: VBtn,

  methods: {
    // ここではVBtnのgenContentメソッドをoverwriteして
    // デフォルトのgenContentメソッドをオーバーライドします。
    genContent() {
      return this.$createElement('div', {
        staticClass: 'v-btn__contents'
      }, [
        'Activate ',
        this.$slots.default
      ])
    }
  }
}

  • アプリケーションが正しく表示されません。

    Vuetifyは v-app コンポーネントを使用する必要があります。 アプリケーション全体をラップする必要があり、テーマを含むフレームワーク機能の多くの中心点となります。 アプリケーション ページに記載されている適切なマークアップに従っていることを確認してください。


  • メニュー/ダイアログ/ナビゲーションドロワーが正しく開きません。

    コンポーネントが v-app 要素でラップされていることを確認します。 activator スロットに配置されていないコンポーネントをアクティブ化するために要素を使用している場合。 クリックイベントの伝播を停止するようにします。 これらのコンポーネントは v-outside click ディレクティブを使用し、直ちに閉じます。


  • 自身のコンテンツが垂直にあふれていなくてもスクロールバーが表示されています。

    Vuetifyは ress reset の若干変更されたバージョンを使用しており、デフォルトではブラウザー間の動作を正常化するためにhtmlスクロールバーがオンになります。 これはデザインの選択であり、何度も議論されてきました。 この機能を持つことと持たないことには賛否両論があり、現在のところ、この機能をそのままにしておくことに賛成の票が集まっています。 この機能を無効にしたい場合は、スタイルファイルにhtml { overflow-y: auto } を追加するだけです。 詳細については、 CSS リセット ページをご覧ください。

  • コンテンツを縦方向に中央に配置するにはどうすればいいですか？

    fill-height prop を v-container に適用します。 This helper class normally only adds height: 100%, but for the container, it also looks for a child v-layout and applies the needed classes to vertically center the content.

  • My / link is active when I’m on /home page.

    Add the exact to the link that points to absolute /. 詳細については、公式の Vue ルーター ドキュメント をご覧ください。


  • モバイルデバイスでアプリケーションがレスポンシブにならないのはなぜですか?

    index.htmlの <head> セクション内に適切なmetaタグがあることを確認してください。

<!-- public/index.html -->
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
</html>

  • Font Awesome, Material Design Icons, Material Iconsをどのように使えばいいですか？

    詳細については、 アイコンガイド をご覧ください。


  • ボタンをクリックした直後に <v-dialog> が閉じられるのはなぜですか？

    v-menu や v-dialog などに activator スロットを使用しない場合 クリックイベントの伝播を手動で停止する必要があります。 これを行うには、click イベントに .stop 修飾子を追加するだけです。

<!-- Vue Component -->
<template>
  <div>
    <v-dialog v-model="dialog">
      <v-card>...</v-card>
    </v-dialog>

    <v-btn @click.stop="dialog = true">
      Open Dialog
    </v-btn>
  </div>
</template>

<script>
  export default {
    data: () => ({
      dialog: false,
    }),
  }
</script>


  • バグの報告や機能のリクエスト方法は？

    必要な情報がすべて提供されていることを確認するために、このプロセスに役立つIssue Generatorを作成しました。 ジェネレーターを使用せずに作成されたissueは自動的にクローズされてしまいますので、必ずこちらをご利用ください。


  • vuetify-loader がすべてのコンポーネントをロードしません。

    vuetify-loader は 動的 コンポーネントに制限があります。 詳細については、 制限 セクションを必ずチェックしてください。


  • バージョン 1.5 はどのくらいの期間サポートされますか?

    2020年7月まで。 詳細については、 長期サポート ページをご覧ください。



  • [Vue warn]: Unknown custom element: <v-app>

    最新バージョンの vue-cli-plugin-vuetify と vuetify-loader が package.json にインストールされていることを確認してください。


  • SCRIPT5022: Expected identifier, string or number

    vue-cli-3 の モダンモード をサポートするために、 vuetify/lib はトランスパイルされません。 vue-cli に vuetify パッケージをトランスパイルするように指示する必要があります。 これは、Vuetifyのcliプラグインをインストールするときに自動的に設定されます。 古いバージョンを使用している場合は、 vue.config.js の transpileDependencies 配列に ‘vuetify’ を追加してください。


  • When adding typescript - Error: Could not find a declaration file for module 'vuetify/lib’

    tsconfig.json の compilerOptions キーを vuetify typeで更新します:

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vuetify"]
  }
}

# ヘルプが必要なとき

問題に関するヘルプが必要な場合は、ヘルプチャンネルをご利用ください。


追加のお問い合わせは、John Leider またはHeather Leider までお願いします。

準備はできましたか？

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:11/12/2024, 6:59:50 AM