Splashscreen

Clase 3 de 21 • Curso Práctico de Vue.js

Santiago Gonzalez

student•

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>

Felix Torres Javier Antonio

student•

y las variables donde se encuentran?

Nestor Rojas

student•

Estan en el minuto 6:35 del video

Cristian Tangarife Gálvez

student•

Para los que busquen el repositorio es este

https://github.com/platzi/practico-vue

Lorenzo PEREZ

company_admin•

Gracias!

Santiago Gonzalez

student•

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

student•

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);
      });
    })

Gustavo Jiménez Liévano

student•

Si es que la profe no uso {} en defineAsyncComponent 👍🏼 Saludos

Marcos Joel Sánchez López

student•

Excelente gracias por el apoyo!!!

José Alejandro Vásquez Gonzalez

student•

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

student•

Repositorio https://github.com/platzi/practico-vue

Juan Guillermo Perez Cardozo

student•

gracias por dejar la url del repo

oscar hernandez

student•

Solo como nota, Suspense aun esta en fase experimental, asi que no se sugiere para uso productivo

https://vuejs.org/guide/built-ins/suspense.html

Jose Flores

student•

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

student•

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

student•

<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

student•

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

student•

He creado el splash con una animación que es lo que comunmente vemos en una web: . Aquí mi repo: Click aquí

Erick Estrada

student•

Para el que no le funcione, es necesario RETORNAR la promesa

return new Promise((resolve) => {
        setTimeout(() => {
          resolve(import("@/components/HomeComponent.vue"))
        }, 2500)

Sergio Medina

student•

Gracias Erick, un error muy común que es olvidar poner el return en un callback.

Cesar González Caballero

student•

<style>

html,

body,

.app {

min-height: 100vh;

margin: 0;

font-family: Arial, Helvetica, sans-serif;

}

* {

--brand-green: #04b500;

--brand-blue: #0689b0;

}

</style>

Jesner Wilian Ramirez Cueva

student•

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

student•

Ya lo soluciones, tuve un error tonto, estaba en vue 2.x,

Miguel Sosa

student•

Necesito ayuda, estoy bloqueado en este punto del curso y no puedo avanzar hace varios días.

<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>

`

<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

Diana Martinez

student•

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

student•

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);
        })
    ),
  },
};
// ...

Juan Camilo Zapata Arbelaez

student•

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>

Diana Martinez

student•

También puedes encontrar la documentación sobre este tema en: https://vuejs.org/guide/components/async.html

David A. Casas Amézquita

student•

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

student•

¿Podrías compartirnos tu proyecto en codesandbox o alguna plataforma similar para apoyarte?

Eduardo Razo Cobián

student•

Aviso: La pagina no funciona, loop al reproducir el video

Diana Martinez

student•

¿Podrías compartirnos captura?

MAXIMILIANO JAYME DAHLQUIST

student•

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

student•

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

student•

se traban demasiado los videos

<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>

<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>

<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>

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 |     ),

// ...
// 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);
        })
    ),
  },
};
// ...

<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>

// app.vue
<template>
  <Transition>
    <Suspense>
      <template #default>
        <HomeApp />
      </template>
      <template #fallback>
        <SplashScreen />
      </template>
    </Suspense>
  </Transition>
</template>

<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>

<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,
    }),
  },
};

Splashscreen

Introducción

Construye una aplicación para el control de tus gastos con Vue.js

Creación del proyecto

Setup inicial

Splashscreen

Header y contenido

Layout

Vista

Resumen de datos

Agregando formato a la moneda

Componente del historial

Lista del historial

El botón para agregar

Formulario para agregar

Gráfico

Creación del SVG del gráfico

Creación de las coordenadas en el gráfico

Creación de la lógica del gráfico

Creando la interacción con el gráfico

Modelo

Modelo de datos

Agregar y quitar

Persistencia del modelo

Últimos detalles de nuestra aplicación

Cierre

Poniendo nuestra aplicación en producción en Netlify

¿Quieres más cursos de Vue?