Vue y Vuetify separating js html and css

Question

No soy un fan de combinar mi html, css, y js en un solo archivo vue, por lo que en lugar de eso estructura mis componentes Vue de esta manera: ├── Calendar │ ├── Calendar.css │ ├── Calendar.html │ ├── Calendar.js │ └── index.vue En index.vue I referencia estos archivos individuales como tales: Esto siempre ha funcionado para mí y ha sido mi forma preferida de organizar el código. He encontrado un problema, sin embargo, con Vuetify. Después de registrar el plugin a nivel mundial, encuentro que muchos de los componentes, incluyendo dar el error de componente desconocido a menos que coloque todos los archivos en un solo componente Vue. ¿Es la forma en que estoy haciendo las cosas una mala práctica, o simplemente no funcionará con la manera vuetificar de hacer las cosas?

algorithmarchitect · Accepted Answer

Gracias a @marsnebulasoup y su comentario, me di cuenta de que no podía reproducir el problema utilizando cualquier código preconstruido sandboxes con vuex configurado así que debe tener que ver con mi configuración específica. Fui capaz de resolverlo desinstalando y reinstalando vuetify. Después de hacer eso todo funcionó, pero creó un nuevo archivo de plugin vuetify. Una vez que lo señalé a la configuración que estaba usando anteriormente, se rompió de nuevo. Me di cuenta de que la configuración que estaba usando estaba utilizando esta importación

import Vuetify from "vuetify/lib/framework"

Pero la configuración predeterminada de vuetify estaba usando

import Vuetify from "vuetify"

Una vez que cambie la importación personalizada para que coincida con la importación predeterminada todo funcionó de nuevo. Estoy usando una plantilla que había vuetificado construido en, así que no noté inmediatamente la diferencia de configuración, habiendo nunca instalado vuetify por mi cuenta antes. Todavía no sé por qué eso hace la diferencia, pero sí.

Respondida el Dec 18, 2020 a las 16:24 - por algorithmarchitect

Gpt · Answer

El enfoque que estás utilizando para estructurar tus componentes Vue, separando el HTML, CSS y JS en archivos individuales y referenciándolos en un archivo index.vue, es una práctica común y válida. Sin embargo, en el caso de Vuetify, puede haber algunas limitaciones al trabajar de esta manera.

Vuetify es un framework que proporciona componentes visualmente ricos y complejos, los cuales pueden requerir un cierto nivel de integración con el resto de la aplicación. Algunos de estos componentes pueden depender de estilos y funcionalidades específicas que se configuran a nivel global.

En tu caso, al registrar Vuetify como un plugin a nivel global, es posible que algunos componentes de Vuetify no estén siendo registrados correctamente cuando se dividen en archivos separados. Esto podría causar que aparezcan errores de "componente desconocido" al intentar utilizar estos componentes en tu aplicación.

Una posible solución es asegurarte de que los componentes de Vuetify se estén importando y registrando adecuadamente en tus archivos JS individuales, de manera que la funcionalidad y estilos asociados a estos componentes estén disponibles cuando se renderice el componente en el archivo index.vue.

En resumen, aunque seguir tu enfoque de separar archivos es una buena práctica de organización de código, en el caso de Vuetify puede ser necesario hacer ajustes para asegurarte de que los componentes de Vuetify se están registrando correctamente y tienen acceso a la funcionalidad y estilos necesarios.

Respondida el Dec 19, 2020 a las 16:27 - por Gpt

Gemini · Answer

Tu forma de estructurar los componentes Vue no es una mala práctica, pero puede no funcionar con la forma en que Vuetify registra sus componentes globalmente.

Cómo registra Vuetify globalmente:

Cuando instalas Vuetify, registra sus componentes globalmente utilizando el siguiente código:

javascript
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

Esto hace que todos los componentes de Vuetify estén disponibles en todos los archivos Vue de tu aplicación.

Problema con tu estructura:

Cuando estructuras tus componentes Vue como lo haces, los archivos HTML, CSS y JS se cargan individualmente mediante referencias src en index.vue. Sin embargo, los componentes de Vuetify no se cargan automáticamente cuando se hace referencia a ellos de esta manera.

Solución:

Para resolver este problema, puedes probar las siguientes soluciones:

1. Carga explícita de componentes de Vuetify:

En Calendar.js, importa explícitamente los componentes de Vuetify que necesites:

javascript
import { VCard } from 'vuetify'

export default {
  components: {
    VCard
  }
}

2. Usa un archivo Vue de una sola página:

Crea un archivo Vue de una sola página (.vue) que incluya todo el código HTML, CSS y JS de tu componente. Esto asegurará que Vuetify se registre correctamente y todos los componentes estén disponibles.

3. Usa un sistema de construcción:

Utiliza un sistema de construcción como webpack o Rollup para empaquetar tus componentes Vue en un solo archivo. Esto automatizará la carga de todos los componentes necesarios, incluidos los de Vuetify.

Conclusión:

Tu forma de estructurar los componentes Vue no es inherentemente incorrecta, pero puede causar problemas cuando se utilizan bibliotecas que registran componentes globalmente, como Vuetify. Considera utilizar una de las soluciones mencionadas anteriormente para resolver este problema.

Respondida el Dec 19, 2020 a las 16:29 - por Gemini

Vue y Vuetify separating js html and css

3 Respuestas: