Vue 3 with Vuetify

<script setup lang="ts">
import { ref } from 'vue';

const cardTitle = ref('Card Title');
</script>

<template>
  <v-card>
    <v-card-title>{{ cardTitle }}</v-card-title>
    <v-card-subtitle>Card subtitle</v-card-subtitle>
    <v-card-text>
      Card content goes here with your custom components
    </v-card-text>
    <v-card-actions>
      <v-btn color="primary">Action</v-btn>
      <v-btn variant="text">Cancel</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const email = ref('');
const password = ref('');
const emailRules = [
  (v: string) => !!v || 'Email is required',
  (v: string) => /.+@.+\..+/.test(v) || 'Email must be valid',
];
const passwordRules = [
  (v: string) => !!v || 'Password is required',
  (v: string) => v.length >= 8 || 'Password must be at least 8 characters',
];

const handleSubmit = () => {
  console.log('Form submitted', { email: email.value, password: password.value });
};
</script>

<template>
  <v-form @submit.prevent="handleSubmit">
    <v-text-field
      v-model="email"
      :rules="emailRules"
      label="Email"
      type="email"
      required
    />
    <v-text-field
      v-model="password"
      :rules="passwordRules"
      label="Password"
      type="password"
      required
    />
    <v-btn type="submit" color="primary">Submit</v-btn>
  </v-form>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const dialog = ref(false);

const deleteItem = () => {
  console.log('Item deleted');
  dialog.value = false;
};
</script>

<template>
  <div>
    <v-btn @click="dialog = true">Open Dialog</v-btn>

    <v-dialog v-model="dialog" max-width="500">
      <v-card>
        <v-card-title>Delete Confirmation</v-card-title>
        <v-card-text>
          Are you sure you want to delete this item?
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn variant="text" @click="dialog = false">Cancel</v-btn>
          <v-btn color="error" @click="deleteItem">Delete</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});

// Writable computed
const count = ref(5);
const doubled = computed({
  get: () => count.value * 2,
  set: (value) => {
    count.value = value / 2;
  }
});
</script>

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <p>Doubled: {{ doubled }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue';

const count = ref(0);
const doubled = ref(0);

// Watch single value
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
  doubled.value = newValue * 2;
});

// Watch multiple values
const firstName = ref('');
const lastName = ref('');

watch([firstName, lastName], ([newFirst, newLast]) => {
  console.log(`Name: ${newFirst} ${newLast}`);
});

// WatchEffect (runs immediately)
watchEffect(() => {
  console.log(`Count is ${count.value}`);
});
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled: {{ doubled }}</p>
  </div>
</template>

// src/composables/useCounter.ts
import { ref, computed } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  const doubled = computed(() => count.value * 2);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  const reset = () => {
    count.value = initialValue;
  };

  return {
    count,
    doubled,
    increment,
    decrement,
    reset
  };
}

<!-- Usage in component -->
<script setup lang="ts">
import { useCounter } from './composables/useCounter';

const { count, doubled, increment, decrement, reset } = useCounter(10);
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled: {{ doubled }}</p>
    <v-btn @click="increment">+</v-btn>
    <v-btn @click="decrement">-</v-btn>
    <v-btn @click="reset">Reset</v-btn>
  </div>
</template>