Часто задаваемые вопросы

Застрял на конкретной проблеме? Проверьте некоторые из этих распространённых ошибок, прежде чем создавать вопрос. Если вы всё ещё не можете найти то, что ищете, отправьте вопрос на github или попросите сообщество в discord.

Мой код не работает - что мне делать?

Во-первых, убедитесь, что вы используете последнюю версию Vue.js и Vuetify. Попробуйте воспроизвести его в codepen, используя следующий шаблон. Если вы не можете воспроизвести проблему вне своей среды, это обычно означает, что проблема возникает локально. Если вы всё ещё не можете решить свою проблему, предоставьте код и введите #need-help в community.

Я получаю ошибку, подобную следующей:
Error in ./node_modules/vuetify/src/dir/file.js Module parse "failed": Unexpected token (<lineno>:<characterno>)

Если вы используете IDE, например IntelliJ IDEA или WebStorm, он часто добавляет автоматический импорт, указывающий на каталог vuetify/src/ для компонентов, которые вы используете. Измените путь импорта с vuetify/src/ на vuetify/es5/

Моё приложение выглядит неправильно

Vuetify требует использования компонента v-app. Он должен обернуть всё ваше приложение и стать центральной точкой для большинства функциональных возможностей фреймворка. Если по какой-либо причине вы не можете использовать этот элемент, вы можете имитировать его из атрибутов и классов. Установите для атрибута data-app значение true для самого высокого доступного элемента (не включая body) и application application - {light | dark} классов.

Тема Dark или Light не работает.

Vuetify требует точки монтирования для выполнения таких задач, как стилизация темы. Убедитесь, что у вас есть приложение v-app. В случае, если это невозможно, по какой-либо причине вы можете имитировать своё поведение, применяя data-app и class = application application - light (или dark) к самому элементу родителю, который в вашем приложении.

Меню/Диалог/Панель навигации не открывается должным образом.

Убедитесь, что ваши компоненты обёрнуты элементом v-app. Если вы используете элемент для активации компонента, который не помещён в слот activator , убедитесь, что вы прекратили распространение события щелчка. Эти компоненты используют директиву v-external-click и немедленно закрываются.

Полоса прокрутки показывается, хотя мой контент не переполняется вертикально.

Vuetify по умолчанию включает панель прокрутки html. Это выбор дизайна и неоднократно обсуждался. Есть плюсы и минусы того, что они имеют и не имеют этого, и на данный момент голосование за то, чтобы оставить его как есть. Если вы хотите отключить эту функцию, просто добавьте html {overflow-y: auto} в ваш файл стиля.

Как центрировать вертикально?

Примените fill-height prop к v-container. Этот класс-помощник обычно добавляет только height: 100%, но для контейнера он также ищет дочерний v-layout и применяет необходимые классы для вертикального центрирования содержимого.

Моя /_ ссылка активна, когда я на _/home странице

Добавьте exact к ссылке, которая указывает на абсолютный /. Для получения дополнительной информации об этом вы можете посетить официальный маршрутизатор Vue документация.

Моя страница на мобильном телефоне не адаптивная

Проверьте, что <head> вашего index.html содержит необходимые метатеги.

Как я могу использовать шрифты Awesome Icons или Material Design Icons (mdi)?

Вы должны добавить шрифты в свой index.html или иным образом импортировать их в свой проект
MDI: Material Design Icons
FA: Font Awesome

Мой диалог закрывается сразу после нажатия кнопки

Если вы не используете слот activator для v-menu иv-dialog, вы должны вручную остановить propagation события click. Для этого просто добавьте модификатор .stop в событие click, `@click.stop ="myMethod"`.

Относительные изображения не работают в компонентах v-card

Vue loader автоматически преобразует относительные пути в требуемые функции. К сожалению, это не тот случай, когда речь идёт о пользовательских компонентах. Вы можете обойти эту проблему, используя require.

<v-card :src="require('path/to/img/img.jpg')">

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore