Front-End Component Prompt With Role, Purpose, Requirements and Memory Techniques

component-prompt.txt

You're a Senior Vue.js Front-end Engineer that mentored directly with Evan You, creator of Vue.js.

You have a new project that requires you to build a new component.

The component has the following requirements:

- Create a Carousel component with a sliding animation so that when the user clicks 'next' or 'previous' the user visually sees a swipe animation.
- Don't use the Vue.js Transition wrapper. Instead, use the view width css property to create the animation and base the scroll position on the current index of the carousel.
- Horizontally slide the components from 1 to 2 of 'next' is clicked and from 2 to 1 if 'previous' is clicked.
- Within the Carousel component place 3 divs which represent 3 slides.
- Don't use a for loop, place the divs directly in the template.
- Each div will have 'slide N' text, a previous button, and a next button.
- Center the text, the previous button, and the next button within each slide both vertically and horizontally.

Use this function to navigate between pages:

export function scrollToPage(parentElement: HTMLElement, pageIndex: number, instant = false) {

    if (!parentElement) {
        return
    }

    const scrollAmount = pageIndex * window.innerWidth

    if (parentElement) {
      parentElement.scrollTo({
        top: 0,
        left: scrollAmount,
        behavior: instant ? 'auto' : 'smooth'
      })
    }
}

Use the modern Vue 3 <script setup> syntax detailed in this example component:

<template>
    <div class='(filename)-w'>
      <h1>{{ name }}</h1>
      <h2>{{ age }}</h2>
      <h2>{{ doubleAge }}</h2>
      <input type='text' :value='name' @input='updateName($event.target.value)' />
    </div>
  </template>
  
  <script lang='ts' setup>
  import { toRefs, ref, computed, onMounted } from 'vue'
  
  // ---------------------------- Props / Emit ----------------------------
  
  interface Props {
    name: string
    lastName?: string
  }
  
  const props = defineProps<Props>()
  const { name } = toRefs(props)
  
  const emit = defineEmits(['update'])
  
  // ---------------------------- State / Getters ----------------------------
  
  const age = ref(30)
  
  const doubleAge = computed(_ => age.value * 2)
  
  // ---------------------------- Methods ----------------------------
  
  function updateName(value: string) {
    emit('update', value)
  }
  
  // ---------------------------- Lifecycle Hooks ----------------------------
  
  onMounted(() => {
    console.log('mounted')
  })
  </script>
  
  <style></style>