Perguntas frequentes
Meu código não funciona - o que devo fazer?
Primeiro, certifique-se de que está usando a versão mais recente do Vue.js e do Vuetify. Tente reproduzir no codepen usando o seguinte template. Se você não conseguir reproduzir o problema fora do seu ambiente, isso geralmente significa que o problema reside localmente. Se você ainda não conseguir resolver seu problema, forneça seu codepen no tópico #need-help na comunidade.
Estou recebendo um erro similar à este:
Error in ./node_modules/vuetify/src/dir/file.js Module parse "failed": Unexpected token (<lineno>:<characterno>)
Se você estiver usando um IDE, como IntelliJ IDEA ou WebStorm, muitas vezes adicionará importações automáticas apontando para o diretório vuetify/src/ para os componentes que você usa. Altere o caminho da declaração de importação de vuetify/src/ para vuetify/es5/.
Minha aplicação não parece correta
O Vuetify requer o uso do componente v-app. Ele deve envolver todo o seu aplicativo e é o ponto central para grande parte da funcionalidade da estrutura. Se, por qualquer motivo, você não pode usar esse elemento, você pode imitá-lo de atributos e classes. Defina o atributo data-app como true no elemento mais alto disponível (não incluindo o body) e as classes application application--{light|dark}.
Os temas Dark e Light não estão funcionando.
Vuetify requer um ponto de montagem para executar tarefas como o estilo do tema. Certifique-se de ter um v-app envolvendo sua aplicação. Caso isso não seja possível, por qualquer motivo, você pode imitar seu comportamento aplicando data-app e class="application application--light (ou dark)" para o elemento mais alto possível dentro da sua aplicação.
Menu/Diálogo/Menu de navegação não estão se abrindo corretamente.
Certifique-se de que seus componentes estejam envolvidos com um elemento v-app. Se você estiver usando um elemento para ativar o componente que não é colocado no slot activator, assegure-se de interromper a propagação do evento de clique. Esses componentes utilizam a diretiva v-outside-click e fecharão imediatamente.
A barra de rolagem está sendo exibida mesmo quando meu conteúdo não excede a altura disponível.
Vuetify por padrão liga a barra de rolagem html. Esta é uma escolha de design e foi debatida várias vezes. Há vantagens e desvantagens de ter e não ter isso e, a partir de agora, a votação é favorável em manter como ela está. Se você deseja desativar esta funcionalidade, basta adicionar html { overflow-y: auto } ao seu arquivo de estilo.
Como centralizar verticalmente?
Aplique a prop fill-height no v-container. Esta classe auxiliar normalmente só adiciona height: 100%, mas para o recipiente, ele também procura uma criança v-layout e aplica as classes necessárias para centralizar verticalmente o conteúdo.
Meu /_ link está ativo quando eu estou na página _/home
Adicione o exact ao link que aponta para a / absoluta. Para mais informações sobre isso, você pode visitar a documentação oficial do Vue router.
Minha página móvel não está responsiva
Adicione o <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> na tag <head> na sua index.html.
Como eu faço para usar os ícones do Font Awesome Icons ou Material Design Icons (mdi)?
Você deve adicionar as fontes ao seu index.html ou, de outro modo, importá-los para o seu projeto
MDI: Material Design Icons
FA: Font Awesome
Minha caixa de diálogo fecha imediatamente após clicar no botão
Quando não estiver usando o slot activator para os v-menu ev-dialog, por exemplo, você deve parar manualmente a propagação do evento de clique. Para fazer isso, basta adicionar o modificador .stop ao evento de clique, `@click.stop="myMethod"`.
Imagens relativas não estão funcionando nos componentes v-card
O carregador do Vue (Vue loader) converte caminhos relativos para exigir funções automaticamente para você. Infelizmente, este não é o caso quando se trata de componentes personalizados. Você pode contornar esse problema usando require.<v-card :src="require("path/to/img/img.jpg")"