mattmaribojoc

<template>
 <button @click="$emit('change')"> Click Me </button>
</template>
<script setup>
  import { defineProps, defineEmit, useContext } from 'vue'

  const props = defineProps({
    foo: String,
  })
  const emit = defineEmit(['change', 'delete'])

mattmaribojoc

<script setup>   
   const post = await fetch(`/api/pics`).then((a) => a.json())
</script>

mattmaribojoc

<script>
  performGlobalSideEffect()

  // this can be imported as `import { named } from './*.vue'`
  export const named = 1
</script>

<script setup>
  // code here
</script>

mattmaribojoc

<script>
import { ref, computed } from 'vue'
export default {
   setup () {
      const a = ref(3)
      const b = computed(() => a.value + 2)
      
      const changeA = () => { a.value = 4 }

      return { a, b, changeA } // have to return everything! 

mattmaribojoc

<script setup>
import { ref, computed } from 'vue'

// all of these are automatically bound to the template
const a = ref(3)
const b = computed(() => a.value + 2)
      
const changeA = () => { a.value = 4 } 

</script>

mattmaribojoc

<template>
     <component-b />
</template>
<script setup>
import ComponentB from './components/ComponentB.vue' // really that's it!
</script>

mattmaribojoc

<script setup>
import HelloWorld from './components/HelloWorld.vue'

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>

mattmaribojoc

<template>
    <div>
        <p> Wrapper for a text input </p>
        <input 
            type="text"
            placeholder="Custom input!"
        />
    </div>
</template>

mattmaribojoc

<template>
    <div>
        <p> Wrapper for a text input </p>
        <input 
            type="text"
            placeholder="Custom input!"
            @change='$emit("customChange", $event.target.value)' /* INLINE EMIT! */
        />
    </div>
</template>

mattmaribojoc

<template>
  <my-input @custom-change="logChange"/>
</template>

<script>
import MyInput from './components/MyInput.vue'
export default {
  components: {
    MyInput
  },