Nuxt Integration
Integra Nuvex UI en Nuxt con una base compatible con SSR, carga correcta de estilos y persistencia de tema antes de pasar a theming mas profundo o a patrones de layout.
Antes de empezar
- Ya completaste Installation o ya tienes el setup minimo funcionando en Nuxt.
- Tu app Nuxt ya compila con Nuvex UI y los estilos base.
- Quieres resolver la integracion real de Nuxt antes de profundizar en theming o App Shell.
Que agrega esta guia
Installation deja funcionando el setup minimo. Esta guia agrega la capa especifica de Nuxt para que tema, SSR y carga inicial queden alineados.
Plugin de Nuxt
Registra Nuvex UI dentro del ciclo normal de plugins de Nuxt en lugar de tratar el setup como una entrada generica de Vue.
Orden de estilos
Confirma el orden de styles.css, framework.scss y tus overrides dentro de nuxt.config.ts.
Persistencia SSR del tema
Usa una cookie como fuente de verdad para que el server conozca el tema inicial antes de hidratar.
Fallback en cliente
Mantiene localStorage como apoyo en cliente sin depender de el como unica fuente del tema.
Registra el plugin en Nuxt
Empieza desde el archivo de plugin donde la app monta Nuvex UI. Ese es el punto de integracion donde despues vivira la configuracion especifica de tema o storage.
app/plugins/nuvex-ui.ts
Carga estilos en nuxt.config.ts
En Nuxt, el orden de los estilos determina si el framework y tus overrides entran en la cascada correcta desde el primer render.
Carga primero nuvex-ui/styles.css, despues nuvex-ui/framework.scss y deja los estilos de tu app despues de ambos.
nuxt.config.ts
Persiste el tema entre SSR y cliente
Si el tema inicial solo vive en localStorage, el server no puede conocerlo antes de renderizar. Usa una cookie como fuente SSR y deja el fallback cliente solo como compatibilidad.
En esta guia, la cookie es la fuente de verdad para SSR. localStorage queda como fallback cliente y capa de compatibilidad legacy.
app/plugins/nuvex-ui.ts helpers
app/plugins/nuvex-ui.ts cookie + storage
Arma la integracion completa en Nuxt
Ahora junta plugin, cookie y lecturas en cliente en un solo punto para que la app ya tenga un tema inicial coherente tanto en server como en cliente.
Con esta base, el server ya puede resolver el tema inicial y el cliente puede conservarlo sin depender solo de actualizaciones despues de hidratar.
app/plugins/nuvex-ui.ts
Verifica la integracion
Usa esta lista para confirmar que la integracion Nuxt ya esta lista antes de pasar a guias de theming mas profundas.
- La app compila y monta Nuvex UI desde el plugin de Nuxt.
- Los estilos base y framework se aplican desde nuxt.config.ts en el orden correcto.
- El tema inicial ya no depende solo de localStorage.
- Al recargar la pagina, el tema persiste sin desalinearse entre server y cliente.
- No aparece un cambio visual evidente de tema justo despues de hidratar.
Problemas comunes
Estos problemas suelen aparecer cuando el setup de Nuxt ya va mas alla de la instalacion minima y conviene resolverlos antes de seguir con theming.
El tema cambia despues de hidratar
Verifica que el server lea el tema desde cookie y que el cliente no dependa solo de localStorage para el valor inicial.
Los estilos no cargan en el orden esperado
Confirma que styles.css carga antes de framework.scss y que tus overrides de app cargan despues de ambos.
El tema no persiste entre recargas
Revisa que el cliente actualice la cookie y no solo localStorage cuando cambie el tema.
Necesito una customizacion de tema mas profunda
El siguiente paso ya es Theming Overview, Runtime Theme API o una guia especifica de custom themes en lugar de alargar esta pagina de integracion.
Siguientes pasos recomendados
Cuando la integracion Nuxt ya este estable, continua con la pagina que mejor encaje con tu siguiente decision sobre tema, runtime o layout.