Sass/Scssが原因でアプリケーションをコンパイルできない
ご使用のsass-loaderバージョンに従って、適切なオプションオブジェクトを使用していることを確認してください。
v2でのグリッドとv1.5の比較例はありますか？
はい。グリッドの例 をご確認下さい。
node-sassモジュールが見当たらない。(Error: Cannot find module 'node-sass')
package.json内の@vue/cliのバージョンが^3.5.0以上であることをご確認ください。
不適切なCSS(Invalid CSS after " @content": expected "}", was "($material-light); ")
package.jsonで node-sass の代わりに sass を使用していることを確認してください。
私のコードが動きません。どうしたらいいでしょうか？
下記エラーがコンソールに生じます。
$attrs is readonly and/or $listeners is readonly
VuetifyはTypescriptを利用しており、現在Vueオブジェクトをimportおよびextendする必要があります。そのため一部のアプリケーションで警告メッセージを生成する可能性があります。現在、進行中の Githubディスカッション があり、さまざまなユースケースで回避策が考えられます。さらに質問がある場合は、 オンラインコミュニティ にご参加ください。
次のようなエラーが表示されます：
Error in ./node_modules/vuetify/src/dir/file.js Module parse "failed": Unexpected token (<lineno>:<characterno>)
IntelliJ IDEAやWebStormなどのIDEを使用している場合、使用するコンポーネントの vuetify/src/ ディレクトリを指す自動インポートが追加されることがよくあります。インポート文のパスをvuetify/src/からvuetify/es5/に変更してください。
vuerouter付きの codepen の例はありますか？
Vuetifyコンポーネントを拡張するには
Vuetifyコンポーネントは、vueのextendsオプションを使用してインポートすることで簡単に拡張できます。 コードペンの例
私のアプリが正しく描画されません。
Vuetifyではv-appコンポーネントを使用する必要があります。アプリケーション全体をラップする必要があり、テーマを含む多くのフレームワーク機能の中心点です。 アプリケーション ページに記載されている適切なマークアップに従っていることを確認してください。
コンテンツが縦にオーバーフローしていないはずなのに、スクロールバーが表示されてしまいます。
Vuetify は ress reset を使用していて、ブラウザ間での動作を正規化するために html のスクロールバーを有効化します。これはデザイン上の1つの選択であり、今まで何度も議論が行われてきました。現時点では、スクロールバーの有無には利点と欠点の両方がありますが、投票の結果、スクロールバーを残すという判断が下されました。もしこの機能を無効化したい場合は、スタイルファイルに html { overflow-y: auto } を追加するだけで無効化できます。
垂直方向の中心に配置したい。
fill-height prop を v-container に適用してください。このヘルパークラスは通常 height: 100% を追加するだけですが、コンテナーに対しては、子要素の v-layout を探し、コンテンツを縦方向の中央に揃えるために必要なクラスを適用します。
/home ページ上にいるときでも / のリンクがアクティブになってしまいます
絶対パスの / に 厳密に一致する リンクを追加してください。これに関する詳しい情報は、公式の Vue router のドキュメント で確認できます。
モバイル用でレスポンシブ対応できない。
適切な meta タグが index.html の <head> セクションの中にあることを確認してください。
Font Awesome, Material Design Icons, Material Iconsを使いたい。
詳細については、アイコンガイド をご覧ください。
ダイアログがクリック後すぐに閉じてしまう。
v-menu と v-dialog の activator slot を使用している場合などには、クリックイベントの propagation を stop する必要があります。これは、click イベントに .stop 修飾子を追加するだけで実現できます。
v-card , v-img等vuetifyコンポーネントにてイメージ参照がうまくいきません。
Vue loader は相対パスを必要な関数に自動的に変換します。残念ながら、カスタムコンポーネントでは自動的な変換が機能しません。この問題を克服するには require を利用します。Vue CLI plugin を用いて Vuetify を使用している場合、プロジェクトの vue.config.js ファイルで vue-loader のオプションを編集することで設定できます。
最新バージョンにアップグレードしたい。
バグレポート、機能リクエストの方法
必要なすべての情報を確実に提供してもらうように、連絡プロセスを支援する Issue Generator を作成しました。ジェネレータを使用しないで作成されたIssueは自動的にクローズされるため、こちらを使用してIssueを登録するようにしてください。
vuetify-loader がコンポーネントをロードしない。
Vuetify-loaderには、dynamic コンポーネントの制限があります。詳細については、制限 セクションを確認してください。
version 1.5 はいつまでサポートされますか？
期限は2020年7月までです。詳しい情報については、長期間サポートのページ を参照してください。
v1.5 ドキュメントはどこにありますか？
カスタム要素がない警告がつぎのように発生する。 [Vue warn]: Unknown custom element:
最新バージョンの vue-cli-plugin-vuetify と vuetify-loader が package.json にインストールされていることを確認してください。
SCRIPT5022: Expected identifier, string or number
vue-cli-3 で modern mode をサポートするために、vuetify/lib はトランスパイルされません。そのため、vue-cli に vuetify パッケージをトランスパイルするように伝える必要があります。Vuetify cli プラグインをインストールした場合、この処理は自動的に行われます。もし古いバージョンを使用している場合は、vue.config.js の transpileDependencies の配列に 'vuetify' を追加してください。
typescript に追加したとき、Error: Could not find a declaration file for module 'vuetify/lib' というエラーが表示されてしまいます
次の設定を tsconfig ファイルに追加してください:
準備はいいですか？ 以下から続きが読めます。