Intro Vue 3

Form.vue

<script setup lang="ts">
import Button from '@/base-components/Button';
import { FormInput, FormLabel } from '@/base-components/Form';
import { reactive } from 'vue';

const form = reactive({
  name: '',
  email: '',
  password: '',
});

const handleSubmit = (e: Event) => {
  e.preventDefault();
  console.log(form);
}

</script>

<template>
  <div class="inline-flex items-center justify-between">
    <form @submit.prevent="handleSubmit">
      <div class="mb-4">
        <FormLabel htmlFor="name">Name</FormLabel>
        <FormInput v-model="form.name" id="name" type="text" />
      </div>
      <div class="mb-4">
        <FormLabel htmlFor="email">email</FormLabel>
        <FormInput v-model="form.email" id="name" type="email" />
      </div>
      <div class="mb-4">
        <FormLabel htmlFor="password">Password</FormLabel>
        <FormInput v-model="form.password" id="name" type="password" />
      </div>
      <div>
        <Button type="submit">Submit</Button>
      </div>
    </form>
  </div>
</template>

HelloWorld.vue

<script setup lang="ts">
import Button from '@/base-components/Button';
import { ref } from 'vue';

const text = ref('Hello World!');

const handleClick = (e: MouseEvent) => {
  e.preventDefault();
  text.value = 'Hello Vue 3!';
}

</script>

<template>
  <div class="inline-flex items-center justify-between">
    <h1 class="font-black text-2xl">{{ text }}</h1>
    <Button variant="primary" @click="handleClick">Hola</Button>
  </div>
</template>