Splashscreen
Contenido del curso
Setup inicial
Vista
Gráfico
Modelo
Cierre
Splashscreen
Contenido del curso
Splashscreen
Santiago Gonzalez
Estudiante
Felix Torres Javier Antonio
Estudiante
Nestor Rojas
Estudiante
Cristian Tangarife Gálvez
Estudiante
Lorenzo PEREZ
Company_adminSantiago Gonzalez
Estudiante
Miguel Angel Reyes Moreno
Estudiante
Gustavo Jiménez Liévano
Estudiante
Marcos Joel Sánchez López
Estudiante
José Alejandro Vásquez Gonzalez
EstudianteNestor Rojas
Estudiante
Juan Guillermo Perez Cardozo
Estudiante
oscar hernandez
Estudiante
Cesar González Caballero
Estudiante
Jose Flores
Estudiante
Diana Martinez
Estudiante
Juan Hernandez
EstudianteDiana Martinez
Estudiante
Carlos Rodríguez
Estudiante
Erick Estrada
Estudiante
Sergio Medina
Estudiante
Jesner Wilian Ramirez Cueva
EstudianteJesner Wilian Ramirez Cueva
Estudiante
Miguel Sosa
EstudianteDiana Martinez
EstudianteMiguel Sosa
Estudiante
Juan Camilo Zapata Arbelaez
EstudianteDiana Martinez
Estudiante
David A. Casas Amézquita
EstudianteDiana Martinez
Estudiante
Eduardo Razo Cobián
EstudianteDiana Martinez
EstudianteMAXIMILIANO JAYME DAHLQUIST
Estudiante
Jeancarlo Javier
EstudianteUnmute Uno
EstudianteEstilos 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>
y las variables donde se encuentran?
Estan en el minuto 6:35 del video
Para los que busquen el repositorio es este
Gracias!
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>
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); }); })
Si es que la profe no uso {} en defineAsyncComponent 👍🏼 Saludos
Excelente gracias por el apoyo!!!
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>
Repositorio https://github.com/platzi/practico-vue
gracias por dejar la url del repo
Solo como nota, Suspense aun esta en fase experimental, asi que no se sugiere para uso productivo
<style>
html,
body,
.app {
min-height: 100vh;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
--brand-green: #04b500;
--brand-blue: #0689b0;
}
</style>
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")
Claro, la promise solamente era para poner el ejemplo de forma explícita, al final el import de todos modos es asíncrono.
<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??
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%.
He creado el splash con una animación que es lo que comunmente vemos en una web: . Aquí mi repo: Click aquí
Para el que no le funcione, es necesario RETORNAR la promesa
return new Promise((resolve) => { setTimeout(() => { resolve(import("@/components/HomeComponent.vue")) }, 2500)
Gracias Erick, un error muy común que es olvidar poner el return en un callback.
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>
Ya lo soluciones, tuve un error tonto, estaba en vue 2.x,
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
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
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>
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
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? 🤙🏼
¿Podrías compartirnos tu proyecto en codesandbox o alguna plataforma similar para apoyarte?
Aviso: La pagina no funciona, loop al reproducir el video
¿Podrías compartirnos captura?
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>
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, }), }, };
se traban demasiado los videos