As we learn about various types of components in Vue and when to use them, we will see how the same component - Numeric Input component in this case - is built using different techniques.

Since Single File Components encapsulate component logic, template, and styles, you can see how reactive property, quantity, events like increment & decrement and watchers are all contained in a single .vue file. Along with it, we also have styles and template as well.

<script>
export default {
    setup() {
        const quantity = ref(0);
        const increment = () => {};
        const decrement = () => {};
        watch(() => quantity.value, (newValue) => {})
        return {};
    },
};
</script>

See full example of Numeric Input Single File Component here

There are two main ways to define the script section of the Vue components: 1) using an explicit setup() function, or 2) using <script setup>. Both of these can be written in JavaScript and TypeScript as well.

1. JS without script setup

setup() function below serves as an entry point to use Composition API in your Vue component. You need to make sure to explicitly return the properties to access them in the template section.

// myComponent.vue
<script> 
    export default {
    props: {  min: Number, max: Number },
    setup(props, { slots, emits, extend, attrs }) {
      const quantity = ref(0)
      return { quantity }
    }
  }
</script>
<template> </template>

2. TS without script setup

You can write a Vue component using defineComponent() to let TypeScript properly infer types inside the Vue component. defineComponent() also supports inferring the props passed to setup() function.

// myComponent.vue
<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    props: { min: Number },
    setup(props) {
      props.min // type: number | undefined
    }
  })
</script>
<template> </template>

3. JS with script setup

As per the Vue docs, <script setup> is a compile-time syntactic sugar for using Composition API inside SFCs.

Vue components written using <script setup> have less boilerplate code because you do not need to return properties - i.e. top-level bindings, reactive properties, events & imports - explicitly to access them in the template section. They are exposed automatically.

Also, when other Vue components are imported in your SFC, you do not need to declare them like we did with Options API.

Finally, you can declare your props and emits (emitted event) using pure TypeScript as well.

// myComponent.vue
<script setup>
  import { ref } from 'vue'
  const emit = defineEmits(['change', 'delete'])
  const props = defineProps({ min: Number, max: Number })
</script>

<template> </template>

4. TS with script setup

Sometimes you may need to use type casting in Vue templates. In those instances, you can add a lang attribute to the <script setup> to leverage TypeScript in binding expressions.

// myComponent.vue
<script setup lang="ts">
  // TypeScript enabled
  let x: string | number = 1
</script>

<template> 
  {{ (x as number).toFixed(2) }}
</template>

Encapsulation of logic, template and styles may work very well in most instances. But when we want to reuse the logic multiple times, while the presentation, i.e. template section, changes more often, that's when we must learn the concept of Composition API that was introduced in Vue 3.

As we learn about various types of components in Vue and when to use them, we will see the same Numeric Input component built using different Vue components design patterns.

With Vue 3, now we can separate the logical aspect of the SFC into a separate file while using the Composition API to encapsulate and reuse stateful logic. This way of writing component logic allows us flexibility for code organisation, better typescript support and reusability while still taking advantage of the Vue’s reactivity system.

Instead of writing all the logic withi a single SFC, here’s the reusable composable (useNumericInput) function to create the same Numeric input component that we created as an SFC.

In the Numeric Input component above, we took out all the reactive parts, such as reactive property, quantity, events like increment & decrement and watchers, and added them into a reusable function, known as composables in Vue.

Now our .vue file will use the reactive properties and methods from the composable.

// components/v2/ReactiveInputWithComposable.vue
const { increment, 
        decrement, 
        validation, 
        number: quantity } = useNumericInput();

See full example of Numeric Input component using composable here and how the logical parts are extracted into its own composable: useNumericInput.

You are reading one of the six articles in the Vue Component Back to Basics series.
• Vue Components Design Patterns: Back to Basics
• Reactive Components in Vue
• Single File Components
• Render Function Components
• Functional Components
• Renderless Components