Vuetify old style

Soy bastante nuevo para Vue/Vuetify, he intentado usar el vuetify v-text-field etiqueta con outline prop.

¿Por qué la etiqueta es como en la imagen?

También la fuente parece no ser la Vuetify.

Mi index.html:

html



    
    
    
    
    test
    
    [email protected]/css/materialdesignicons.min.css" rel="stylesheet">



    
    

     built files will be auto injected

enter image description here

Pregunta hecha hace 3 años, 5 meses, 0 días - Por hackharbinger

3 Respuestas:

  • Envuélvete. App.vue dentro . Entre otras cosas, envuelve la aplicación en la v-application clase que muchos estilos utilizan como parte de su selector. Desde docs:

    El v-app componente es NECESITA para todas las aplicaciones. Este es el punto de montaje para muchos de los componentes y funcionalidad de Vuetify y asegura que se propaga la variante de aplicación predeterminada (disco/luz) a los componentes de los niños y también garantiza el apoyo correcto de navegadores cruzados para ciertos eventos de clic en navegadores como Safari. v-app sólo debe ser renderizado dentro de su solicitud ONCE.

    Respondida el Dec 16, 2020 a las 10:28 - por daniel1

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando es probablemente debido a que no has importado el estilo de Vuetify de manera correcta en tu proyecto. Cuando estás usando Vuetify, es importante asegurarte de que estás utilizando los estilos de Vuetify para que los componentes se vean correctamente.

    Aquí hay un ejemplo de cómo podrías importar los estilos de Vuetify en tu proyecto:

    • Asegúrate de tener instalado Vuetify en tu proyecto, puedes instalarlo utilizando npm o yarn:
    bash
npm install vuetify

    o
    yarn add vuetify
    • Luego, importa los estilos de Vuetify en tu proyecto. Asegúrate de que esto se haga en un archivo que se aplique globalmente a tu aplicación, como en tu archivo `main.js` o `App.vue`:
    javascript
// main.js

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

// el resto de tu configuración de Vue

new Vue({
  render: h => h(App)
}).$mount('app');

    Al importar los estilos de Vuetify de esta manera, los componentes de Vuetify deberían renderizarse adecuadamente con los estilos correctos. Además, asegúrate de que los estilos de la fuente también se están aplicando correctamente en tu proyecto.

    Si sigues teniendo problemas, te recomendaría revisar la documentación de Vuetify para obtener más información sobre cómo configurar los estilos en tu proyecto: Documentación de Vuetify - Get started

    Espero que esta información te sea útil para solucionar tu problema.

    Respondida el Dec 17, 2020 a las 10:28 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Hay algunos problemas potenciales que podrían estar causando la apariencia y la fuente de tu campo de texto Vuetify:

    • Versión de Vuetify: Asegúrate de usar una versión compatible de Vuetify. La sintaxis `outline` que estás usando era válida en Vuetify 1, pero ha cambiado en Vuetify 2 y 3.
    • Importación de fuentes: Verifica que hayas importado correctamente la fuente Roboto en tu aplicación. Parece que el campo de texto está usando una fuente diferente, lo que podría deberse a una importación de fuente faltante o incorrecta.
    • Sintaxis de `v-text-field`: La sintaxis de `v-text-field` ha cambiado en Vuetify 2 y 3. Asegúrate de usar la sintaxis correcta para tu versión de Vuetify. Puedes consultar la documentación oficial para obtener más información sobre la sintaxis actual.
    • Versión de Vue: La versión de Vue que estás usando también puede afectar la apariencia del campo de texto. Asegúrate de usar una versión compatible de Vue con tu versión de Vuetify.

    Aquí tienes un ejemplo actualizado de código que debería funcionar con Vuetify 3:

    vue

    Asegúrate de importar Vuetify y la fuente Roboto correctamente en tu aplicación. También puedes consultar la documentación oficial de Vuetify para obtener más información sobre el uso de v-text-field.

    Respondida el Dec 17, 2020 a las 10:41 - por Gemini

    Votos positivos: 0 | Votos negativos: 0