Splashscreen
Contenido del curso
Splashscreen
Contenido del curso
Santiago Gonzalez
Felix Torres Javier Antonio
y las variables donde se encuentran?
Nestor Rojas
Estan en el minuto 6:35 del video
Santiago Gonzalez
Estilos del componente App.vue
<style> html, body, .app { min-height: 100vh; margin: 0; font-family: Arial, Helvetica, sans-serif; } * { --brand-green: #04b500; --brand-blue: #0689b0; } </style>
Miguel Angel Reyes Moreno
Gustavo Jiménez Liévano
Si es que la profe no uso {} en defineAsyncComponent 👍🏼 Saludos
Marcos Joel Sánchez López
Excelente gracias por el apoyo!!!
José Alejandro Vásquez Gonzalez
Hola, para el que use Composition Api con el script setup te muestro como seria el codigo, por si hay algo que mejorar me puedes avisar o corregir, lo hago de esta manera para acostumbrame de un solo al Composition Api, los otros componentes son de igual manera:
<script setup> import SplashScreen from "./components/SplashScreen.vue"; import { defineAsyncComponent } from "vue"; const Home = defineAsyncComponent(() => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(import("./components/Home.vue")); }, 2500); }); }); </script> <template> <Suspense> <template #default> <Home></Home> </template> <template #fallback> <splash-screen></splash-screen> </template> </Suspense> </template> <style scoped> </style>
Nestor Rojas
Repositorio https://github.com/platzi/practico-vue
Juan Guillermo Perez Cardozo
gracias por dejar la url del repo
oscar hernandez
Solo como nota, Suspense aun esta en fase experimental, asi que no se sugiere para uso productivo
Cesar González Caballero
<style>
html,
body,
.app {
min-height: 100vh;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
--brand-green: #04b500;
--brand-blue: #0689b0;
}
</style>
Jose Flores
Normalmente el componente asyncrono, si realmente es pesado o tardado se debe colocar sin la Promise ni todo eso, solamente seria de la siguiente manera no?
NameComp: defineAsyncComponent(() => import("./path/comp.vue")
Diana Martinez
Claro, la promise solamente era para poner el ejemplo de forma explícita, al final el import de todos modos es asíncrono.
Juan Hernandez
<Suspense> is an experimental feature and its API will likely change.
El componente de suspense me esta mostrando este mensaje y no me muestra la carga que deberia en realidad la app no hace nada estoy en ubuntu que puedo hacer??
Diana Martinez
Como ahí dice, Suspense es una funcionalidad experimental, es posible que haya dejado de funcionar en versiones más recientes, creo que podrías solo utilizar un v-if o algo similar para reemplazarlo, algo así cómo hacer tu propia versión. Otra opción es que te asegures de estar utilizando la versión exacta de Vue que uso en el curso y así poder seguirlo al 100%.
Carlos Rodríguez
He creado el splash con una animación que es lo que comunmente vemos en una web: . Aquí mi repo: Click aquí
Erick Estrada
Para el que no le funcione, es necesario RETORNAR la promesa
return new Promise((resolve) => { setTimeout(() => { resolve(import("@/components/HomeComponent.vue")) }, 2500)
Sergio Medina
Gracias Erick, un error muy común que es olvidar poner el return en un callback.
Jesner Wilian Ramirez Cueva
Me sale este error, si funciona normal la promesa pero no me funciona el Suspense
VM9751:1 [Vue warn]: Unknown custom element: <Suspense> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App> at src/App.vue <Root>
Jesner Wilian Ramirez Cueva
Ya lo soluciones, tuve un error tonto, estaba en vue 2.x,
Miguel Sosa
Diana Martinez
Es probable que exista algún error al resolver la promesa que importa el componente, tal vez incluso sea por la versión de Vue, te recomiendo revisar que estés usando la misma versión de Vue que el curso para que todo sea más fácil.
También puedes encontrar la documentación sobre este tema en: https://vuejs.org/guide/components/async.html
Miguel Sosa
Juan Camilo Zapata Arbelaez
Diana Martinez
Es probable que exista algún error al resolver la promesa que importa el componente, tal vez incluso sea por la versión de Vue, te recomiendo revisar que estés usando la misma versión de Vue que el curso para que todo sea más fácil.
También puedes encontrar la documentación sobre este tema en: https://vuejs.org/guide/components/async.html
David A. Casas Amézquita
Alguien intento usar <transition> con <suspense>, si es el caso le funciono?
este es el código que tengo
// app.vue <template> <Transition> <Suspense> <template #default> <HomeApp /> </template> <template #fallback> <SplashScreen /> </template> </Suspense> </Transition> </template>
me está funcionando bien la transición entre SplashScreen y Home, pero en consola estoy obteniendo este mensaje de advertencia
según lo que bésque es porque el elemento usado para las transiciones no es nativo HTML, pero al encapsularlos en un Div, deja de funcionar he intentado varias formas pero no he podido quitar el mensaje de error sin que deje de funcionar el transition 😢
Alguno sabe por que o como arreglarlo? 🤙🏼
Diana Martinez
¿Podrías compartirnos tu proyecto en codesandbox o alguna plataforma similar para apoyarte?
Eduardo Razo Cobián
Aviso: La pagina no funciona, loop al reproducir el video
Diana Martinez
¿Podrías compartirnos captura?
MAXIMILIANO JAYME DAHLQUIST
Yo estoy usando IDX para realizar el proyecto.<script setup>import SplashScreen from './components/SplashScreen.vue';import { defineAsyncComponent, ref } from 'vue';const showSplash = ref(true); const HomePage = defineAsyncComponent(() => { return import('./components/HomePage.vue');});setTimeout(() => { showSplash.value = false; // Hide splash screen after 5 seconds}, 2000); </script> <template> <SplashScreen v-if="showSplash" /> <HomePage v-else /> </template> Como no funciona suspense, lo hice de esta forma:
<script setup> import SplashScreen from './components/SplashScreen.vue'; import { defineAsyncComponent, ref } from 'vue'; const showSplash = ref(true); const HomePage = defineAsyncComponent(() => { return import('./components/HomePage.vue'); }); setTimeout(() => { showSplash.value = false; // Hide splash screen after 5 seconds }, 2000); </script> <template> <SplashScreen v-if="showSplash" /> <HomePage v-else /> </template>
Jeancarlo Javier
Una Alternativa Sin Suspense:
<template> <Home /> </template> export default { name: 'App', components: { Home: defineAsyncComponent({ loader: () => new Promise((resolve, reject) => { setTimeout(() => { import('./components/Home.vue') .then(resolve) .catch(reject); }, 2500); }), loadingComponent: SplachScreen, }), }, };
Unmute Uno
se traban demasiado los videos
Estilos del componente SplashScreen.vue
<style scoped> .splashscreen { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; } h1 { color: var(--brand-blue); } h1 span { color: var(--brand-green); } </style>
Estuve como 30 minutos con el problema de que no funcionaba defineAsyncComponent Solamente usen return en la promesa, por si a alguien le pasa:
Home: defineAsyncComponent(() => { return new Promise((resolve) => { setTimeout(() => { resolve(import("./components/Home.vue")); }, 2500); }); })
Necesito ayuda, estoy bloqueado en este punto del curso y no puedo avanzar hace varios días.
<!-- App.vue -->
<template> <Home /> </template> <script lang="ts"> // import SplashScreen from "@/components/SplashScreen.vue" import { defineAsyncComponent } from "vue"; export default { components: { // SplashScreen, Home: defineAsyncComponent( () => new Promise((resolve) => { setTimeout(() => { resolve(import("./components/HomeScreen.vue")); }, 2500); }) ), }, }; </script>
`<!-- HomeScreen.vue -->
<template> Hello home </template>
Me retorna este error
Argument of type 'Promise<typeof import("*.vue")>' is not assignable to parameter of type '{ default: never; } | PromiseLike<{ default: never; }>'. Type 'Promise<typeof import("*.vue")>' is not assignable to type 'PromiseLike<{ default: never; }>'. Types of property 'then' are incompatible. Type '<TResult1 = typeof import("*.vue"), TResult2 = never>(onfulfilled?: ((value: typeof import("*.vue")) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | null | undefined) => Promise<...>' is not assignable to type '<TResult1 = { default: never; }, TResult2 = never>(onfulfilled?: ((value: { default: never; }) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | null | undefined) => PromiseLike<...>'. Types of parameters 'onfulfilled' and 'onfulfilled' are incompatible. Types of parameters 'value' and 'value' are incompatible. Type 'typeof import("*.vue")' is not assignable to type '{ default: never; }'. Types of property 'default' are incompatible. Type 'DefineComponent<{}, {}, any, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin, ... 4 more ..., {}>' is not assignable to type 'never'. 14 | new Promise((resolve) => { 15 | setTimeout(() => { > 16 | resolve(import("./components/HomeScreen.vue")); | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 17 | }, 2500); 18 | }) 19 | ),
Y no lo puedo resolver
Si alguien tuvo o tiene el mismo problema respecto a la incompatibilidad de tipos de la promesa (para simular el splashscreen con el componente Suspence) esta es la solución por el momento:
// ... // Define the type based on the type of the import type VueComponentType = typeof import("./components/HomeScreen.vue"); export default { components: { SplashScreen, Home: defineAsyncComponent( // Use the type as the generic type for the Promise () => new Promise<VueComponentType>((resolve) => { setTimeout(() => { resolve(import("./components/HomeScreen.vue")); }, 2500); }) ), }, }; // ...
No renderiza los componenetes y solo me suelta esta advertencia en la consola: [Vue warn]: Failed to resolve component: HomeComponent
<template> <Suspense> <template #default> <HomeComponent></HomeComponent> </template> <template #fallback> <SplashScreenVue></SplashScreenVue> </template> </Suspense> </template> <script> import SplashScreenVue from '@/components/SplashScreen.vue'; import { defineAsyncComponent } from "vue"; export default { components: { SplashScreenVue, Home: defineAsyncComponent( () => { return new Promise((resolve) => { setTimeout( () => { resolve(import("./components/HomeComponent.vue")) }, 2500 ) }) }) }, }; </script>
