Resume Components

In this chapter, we will create the main resume components.

Basic Info Component

Create src/components/BasicInfo.vue:

<template>
  <section class="basic-info">
    <h1>{{ name }}</h1>
    <p class="title">{{ title }}</p>
    <div class="contact">
      <span>{{ email }}</span>
      <span>{{ phone }}</span>
    </div>
  </section>
</template>

<script setup lang="ts">
defineProps({
  name: String,
  title: String,
  email: String,
  phone: String,
});
</script>

Experience Component

Create src/components/Experience.vue:

<template>
  <section class="experience">
    <h2>Experience</h2>
    <div v-for="job in jobs" :key="job.company" class="job">
      <h3>{{ job.position }} at {{ job.company }}</h3>
      <p class="date">{{ job.startDate }} - {{ job.endDate }}</p>
      <ul>
        <li v-for="desc in job.descriptions" :key="desc">{{ desc }}</li>
      </ul>
    </div>
  </section>
</template>

<script setup lang="ts">
interface Job {
  position: string;
  company: string;
  startDate: string;
  endDate: string;
  descriptions: string[];
}

defineProps({
  jobs: Array as () => Job[],
});
</script>

Education Component

Create src/components/Education.vue:

<template>
  <section class="education">
    <h2>Education</h2>
    <div v-for="edu in schools" :key="edu.school" class="school">
      <h3>{{ edu.degree }} - {{ edu.school }}</h3>
      <p class="date">{{ edu.startDate }} - {{ edu.endDate }}</p>
    </div>
  </section>
</template>

<script setup lang="ts">
interface School {
  degree: string;
  school: string;
  startDate: string;
  endDate: string;
}

defineProps({
  schools: Array as () => School[],
});
</script>

Skills Component

Create src/components/Skills.vue:

<template>
  <section class="skills">
    <h2>Skills</h2>
    <div class="badges">
      <span v-for="skill in skills" :key="skill" class="badge">{{ skill }}</span>
    </div>
  </section>
</template>

<script setup lang="ts">
defineProps({
  skills: Array as () => string[],
});
</script>

Next Steps

In the next chapter, we will learn how to generate PDF from the resume.