Nuxt proporciona una forma de establecer dinámicamente un layout dentro de un componente, pero ¿hay alguna forma de determinar qué diseño está en uso desde dentro de la <template> , por ejemplo v-if="layout === 'me'" ? Por ejemplo, quiero usar una sola ruta /c/dream y proporcionar un diseño para un usuario que esté autenticado y otro diseño para un usuario que no esté autenticado. Si puedo determinar el diseño en uso desde dentro de la plantilla, entonces puedo estructurar el HTML de acuerdo con el diseño. Inspeccioné this objeto en un componente y no veo una forma de determinar qué diseño está en uso.
Una forma es confiar en la función de proporcionar/inyectar de Vue para transmitir esta información a todos los componentes secundarios.
Sus diseños proporcionarían el nombre del diseño:
// layouts/authenticated.vue export default { provide() { return { layout: "authenticated" }; }, }; Los componentes de su página o cualquier componente secundario pueden inyectar layout para determinar qué diseño está actualmente en uso.
pages/c/dream.vue
<template> <div> <div v-if="layout == 'authenticated'"> <!-- custom UI for authenticated users --> </div> </div> </template> <script> export default { // Determines which layout is currently in use inject: ["layout"], // Decide which layout to use // based on Nuxt context as an example layout(context) { return context.user ? "authenticated" : "default"; }, }; </script> Debo admitir que es extraño implementar el layout(context) para establecer el diseño que queremos usar y tener que inyectar el layout para acceder al valor en el mismo componente.