diff --git a/src/componentes/Personaje.vue b/src/componentes/Personaje.vue
new file mode 100644
index 0000000..6fef764
--- /dev/null
+++ b/src/componentes/Personaje.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import type { ElementoPaisaje } from '../tipos';
+interface Props {
+  personaje: ElementoPaisaje;
+  // Definir qué tipo de dato va a ser la ubicación
+  ubicacion: any;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <h1>{{ personaje.nombre }}</h1>
+  <p>{{ personaje.descripcion }}</p>
+  <video :src="personaje.ruta"></video>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/componentes/Podcast.vue b/src/componentes/Podcast.vue
new file mode 100644
index 0000000..d39b50d
--- /dev/null
+++ b/src/componentes/Podcast.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import type { ElementoPaisaje } from '../tipos';
+interface Props {
+  podcast: ElementoPaisaje;
+  // Definir qué tipo de dato va a ser la ubicación
+  ubicacion: any;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <h1>{{ podcast.nombre }}</h1>
+  <p>{{ podcast.descripcion }}</p>
+  <audio :src="podcast.ruta"></audio>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/componentes/Relato.vue b/src/componentes/Relato.vue
new file mode 100644
index 0000000..eb12ce9
--- /dev/null
+++ b/src/componentes/Relato.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import type { ElementoPaisaje } from '../tipos';
+interface Props {
+  relato: ElementoPaisaje;
+  // Definir qué tipo de dato va a ser la ubicación
+  ubicacion: any;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <h1>{{ relato.nombre }}</h1>
+  <p>{{ relato.descripcion }}</p>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/tipos.ts b/src/tipos.ts
new file mode 100644
index 0000000..46ebbad
--- /dev/null
+++ b/src/tipos.ts
@@ -0,0 +1,8 @@
+// Los elementos son: podcast, personaje y texto
+export interface ElementoPaisaje {
+  nombre: string;
+  descripcion: string;
+  // POR HACER: definir formato de ubicación
+  ubicacion: number;
+  ruta?: string;
+}