Компонент Vuetify v-btn выглядит иначе с атрибутом nuxt

Question

Компонент v-btn (vuetify) отображается по-разному, если он имеет атрибут "nuxt" (для использования в качестве в nuxt. js framework).

Как это исправить?

Первое изображение - это компонент v-btn без «nuxt» (как обычно должно отображаться), а второе имеет атрибут.

<v-btn
    class="enter-btn"
    large
    color="error"
    :disabled="!agreed"
>
    Accept and Enter
</v-btn>

<v-btn
    class="enter-btn"
    large
    color="error"
    :disabled="!agreed"
    nuxt
    to="/to/url"
>
    Accept and Enter
</v-btn>

Answer 1

При добавлении атрибутов nuxt и to элемент изменяется с <button ...> на <a href="/to/url" ... >.

К сожалению, добавление двух примеров кода в проект fre sh не показывает визуальную разницу, которая у вас есть. <a> имеет дополнительный класс v-btn--router, но он не вызывает проблем с разницей в ширине или выравниванием текста.

Вы можете немного отладить, проверив каждый элемент в консоли, глядя на панель стилей. и проверка любых источников стиля (на RHS), кроме Vuetify, которые VBtn.sass & VApp.sass.

Так как ширина является одним из атрибутов проблемы, также стоит проверить значение width на вкладке Computed.
Если оно установлено чем-то напрямую, вы можете щелкнуть его открытым, чтобы увидеть источник его значения (например, высота установлена ​​в 44px классами .v-btn:not(.v-btn--round).v-size--large в файле VBtn.sass).