JeffreyWay

<script setup>
defineProps({
  show: Boolean
});
</script>

<template>
  <Transition
   enter-from-class="opacity-0 scale-125"
   enter-to-class="opacity-100 scale-100"

JeffreyWay

<script setup>
  defineProps({
    show: Boolean
  });
</script>

<template>
  <div v-if="show" class="modal-mask">
    <div class="modal-container">
      <div>

JeffreyWay

import { defineStore } from "pinia";

export let useTeamStore = defineStore('team', {
  state: () => ({
    name: '',
    spots: 0,
    members: []
  }),

  actions: {

JeffreyWay

<template>
  <footer class="mt-12 bg-gray-100 py-4 text-center">
    <h5 class="font-semibold text-lg">{{ team.name }} - {{ team.spots }} Member Team</h5>
  </footer>
</template>

<script setup>
defineProps({
  team: Object
});

JeffreyWay

import { defineStore } from "pinia";

export let useCounterStore = defineStore('counter', {
  // data
  state() {
    return {
      count: 5
    };
  },

JeffreyWay

<script setup>
import {counter} from "@/stores/counterStore";
</script>

<template>
  <div>
    <h1>{{ counter.count }}</h1>

    <button @click="counter.increment()">Increment</button>
  </div>

JeffreyWay

<template>
  <div>
    <h5>{{ state.name }}</h5>
  </div>
</template>

<script setup>
import {state} from "@/stores/quizStore";
</script>

JeffreyWay

<script setup>
  import TabbableTextarea from "@/components/TabbableTextarea.vue";
  import { ref } from "vue";

  let comment = ref('initial textarea value');
</script>

<template>
  <main>
    <form>

JeffreyWay

<script setup>
  import { useStorage } from "@/composables/useStorage";

  let food = useStorage('food', 'tacos');
</script>

<template>
  <main>
    <p>
      What is your favorite food? <input type="text" v-model="food">

JeffreyWay

import Assignment from "./Assignment.js";
import AssignmentTags from "./AssignmentTags.js";
import Panel from "./Panel.js";

export default {
    components: { Assignment, AssignmentTags, Panel },

    template: `
        <Panel v-show="assignments.length" class="w-60">
            <div class="flex justify-between items-start">