vuetifyのcounterが、Nuxtの本番環境において動作しない。

Question

Nuxt.jsを使ってwebアプリを開発中なのですが、npm generateによって本番環境をビルドした際、text-fieldのcounterが正常に動作しません。

原因の他、解決方法が知りたいです。よろしくお願いいたします。

pages/index.vue

<template>
   <v-form>
     <v-text-field
        counter
        filled
      ></v-text-field>
   </v-form>
</template>

また、$npm run devによって開発環境をビルドした際はcounterは正常な値を返します。

自分で試したこと

@nuxtjs/vuetifyのアップデート、
counterを:counterと記載、
counterをcounter-valueと記載等

Comments

[hon.ki]

不思議ですね。本番環境で当該ページで、エラーとかは出てないんですね？

Answer 1

情報が足りないですが、プロダクション用のビルドだけで発生するとのことなので、おそらく @nuxt/vuetiry の treeShake オプションが影響しているのではないかと思います。
vuetifyモジュールはデフォルトだと NODE_ENV === 'production' の時は treeShake オプションが有効になり、必要なコンポーネントのみをロードするようなビルドに変わります。
具体的に何が足りないかなどは再現するコード一式をもらわないと調査が難しいです。
これが原因の場合は nuxt.conf.js で treeShake を false にするか、
https://github.com/nuxt-community/vuetify-module/issues/193
このIssueに書いてあるような感じで必要なComponentを列挙するなどして対応が可能です。

Answer 2

大した答えは提供できないのですが、
nuxt + vuetifyの組み合わせで本番環境だけ出るエラー例
https://github.com/nuxt-community/vuetify-module/issues/372
https://github.com/vuetifyjs/vuetify/issues/11386

私はnuxt経験がないのですが、もしかしたら結構ハマりどころなのかもですね。