質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Q&A

2回答

1189閲覧

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

fal.

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

0グッド

1クリップ

投稿2021/07/03 06:22

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

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

pages/index.vue

vuejs

1<template> 2 <v-form> 3 <v-text-field 4 counter 5 filled 6 ></v-text-field> 7 </v-form> 8</template>

イメージ説明

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

イメージ説明

自分で試したこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hon.ki

2021/09/05 06:06

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

回答2

0

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

投稿2021/09/21 15:54

編集2021/09/21 15:55
aaharu

総合スコア441

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

投稿2021/09/05 06:17

hon.ki

総合スコア157

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問