I have long debated if I needed to write this article, but since I have received the same question multiple times in the past few months, I guess this simple feature needs an explanation.

No matter if you are an advanced Vue developer or if you are starting out when you will first use the script setup you will ask yourself a simple question:

How do I access and declare properties while I write my component using the Script Setup?

TLTR; Properties are declared using the defineProps compiler macros. After declaring it, the properties will be available using a global object just like a normal ref.

Declaring properties

Both the composition API and the Options API have provided us with the ability to define properties using one of the options called props as shown below

<script>
expot default {
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

These properties can then easily be accessed throughout the component now and within setup() one of its arguments. Let’s refresh our memory with a further illustration below:

<template>
  <span>{{ name }}</span>
</template>
<script>
expot default {
  props: {
    name: {
      type: String,
      required: true
    }
  },
  setup( props ) {
    const msg = "My name is:" + props.name;
  },
  computed: {
    fakeName() {
      return this.name + " Smith";
    }
  }
}
</script>

When I first moved to Vue 3, I had the possibility to use the script setup out of the box, and I was the first to ask the previously mentioned question, “how do I access props”, unless you search around, you won’t be able to find the solution with your Vue knowledge.

When using the <script setup> properties are defined using compiler macros called defineProps.

The syntax is similar to the one previously used in the Options API but surrounded by our new macro. Let’s see an example in practice:

<script setup>
const props = defineProps({
  items: {
    type: Array,
    required: true
  }
});
</script>

Now that we have seen how to declare it, let’s replicate the above example and see how to access and use these props.

<template>
  <span>{{ props.name }}</span>
</template>
<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
  name: {
    type: String,
    required: true
  }
});

const msg = ref("My name is:" + props.name);

const fakeName = computed( () => {
      return props.name + " Smith";
} );
</script>

We are able to call our properties constant in anything we would like, but I suggest using the word props or use destructuring as shown below:

<template>
  <span>{{ name }}</span>
</template>
<script setup>
import { ref, computed } from 'vue';
const { name } = defineProps({
  name: {
    type: String,
    required: true
  }
});

const msg = ref("My name is:" + name);

const fakeName = computed( () => {
      return name + " Smith";
} );
</script>

Conclusion

As this article shows, declaring and accessing props using the <script setup> is quite simple and straightforward as everything else within the Vue framework. I really hope this example has helped you as it would have helped me the first time. Please leave a comment below if you have any suggestions on the article or if you would like to leave a note for my next article.

NOTE: Compiler Macros are global functions available within the script setup that will “compile” into other code at build time.