9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

Member-only story

Context Argument in Vue 3 Composition API

Script Setup
LaravelTuts · Follow
11 min read · Sep 16, 2022

Listen Share More

Context Argument in Vue 3 Composition API Script Setup

Hello dev, Today we are going to learn Context Argument in Vue 3 Composition API
Script Setup. This tutorial will cover on Context Argument in Vue 3 Composition API
Script Setup.

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setup… 1/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

The context argument in Vue 3 is an object that provides component functionalities.

You can use composition API in 2 ways. One is using setup() function and another is
using script setup syntax.

You have to access the context argument or the properties of the context argument in
different ways depending on which composition API style you choose.

You will get the same result in both cases, the only difference is how we access those
properties from the context object in Vue 3 Composition API.

In this article, I will show you everything in detail about the context argument why you
need it, and all the arguments available in the setup() function, properties you will get
inside the context object, and many more.

You will also see examples in both ways i.e. how you can use context argument in the
setup() function as well as in the script setup syntax.

Also Read: Laravel 9 Vue JS CRUD App using Vite Example

Why Do You Need Context Argument in Vue 3?

Earlier in Vue 2, you could only use the Options API to write your application. But in
Vue 3, you can use Composition API and Options API. But there are some differences
between Composition API and Options API in Vue 3.

In the Options API, you can access the this keyword inside the Vue component which
represents the instance of that component. You can use the component functionalities
like this.$slots , this.$emit , this.$attrs using the this keyword.

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setup… 2/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

But, inside the setup() function of Composition API, you don’t have access to the this

keyword. Because the setup() function runs before creating the instance of a Vue
component.

That’s why to use those component functionalities inside the setup() function you
need the context argument in Vue 3.

All Arguments in Composition API Setup Function

There are a total of 2 arguments in the setup() function. These are:

props

context

The first argument gives you access to the props that are passed to the component. The
second argument is the context object.

<script>
export default {
setup(props, context) {

}
}
</script>

In this post, we will only discuss the second argument and all the properties you get in
the context object.

Properties Inside The Context Object in Vue 3 Setup Function

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setup… 3/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

The context object has four properties. Each property gives access to a piece of
component information.

These properties are:

context.attrs — attribute passed to the component which is not a prop.

context.emit — the function to send custom events from a component.

context.slots — an object with all the template slot’s render functions.

context.expose() — the function to expose properties or methods for a parent

component.

These are the properties and methods available inside the context object. Let’s discuss
each of them in detail.

<script>
export default {
setup(props, { attrs, emit, slots, expose }) {
}
}
</script>

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setup… 4/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

If you don’t want to call those property names using context , you can use JavaScript
object destructuring instead.

Also Read: Laravel 9 Install Vue JS Example

Use of context.attrs
The context.attrs is an object that contains all the non-props attributes. If you pass
any additional attribute to the component from the parent which is not defined as
props, you will be able to access that attribute through this context.attrs property.

For example, I have created a component which is called MyComponent in my Vue

application. This component accepts one title prop.

// MyComponent.vue

<script>
export default {
props: {
title: String
},
setup(props, context) {
console.log(context.attrs.name);
}
}
</script>

Now, in the parent component when I use the MyComponent component, I can pass
several attributes along with the title props.

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setup… 5/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

Context Argument in Vue 3 Composition API Script Setup

In this example, I am passing the name attribute which is not defined as a prop. I can
access the name attribute using context.attrs.name inside the MyComponent component.

// App.vue
<template>
<MyComponent title="LaravelTuts" name="my-component" />
</template>

The context.attrs property will contain everything other than the props. It also
includes custom event listeners and HTML attributes

Note: The context.attrs property is not reactive. That means, if the value of any attribute
changes, the component will not re-render. To display the updated value, you have to use the
onUpdated() lifecycle hook.

Use of context.emit
The context.emit() is used to emit a custom event in the child component. It replaces
the this.$emit in the options API.

You can emit your custom event with or without data. When the parent component
listens to the event, it will receive that data as a payload.

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setup… 6/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

// MyComponent.vue

<template>
<div>
<h2>{{title}}</h2>
<button @click="hideTitle">Hide</button>
</div>
</template>

<script>
export default {
props: {
title: String
},
setup(props, context) {
const hideTitle = () => {
context.emit('hide' /* Pass payload if any */);
}

return {
hideTitle
}
}
}
</script>

I am emitting an event called hide using context.emit() from the child component.
When I click the button this event will be emitted.

<template>
<MyComponent title="LaravelTuts" @hide="handleEvent" />
</template>

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setup… 7/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

When I use the MyComponent in the parent component, I will listen to the hide event
using v-on directive.

Also Read: Create CRUD Application with Laravel and Vue.js

Use of context.expose()
By default, all the properties and methods you return from the setup() function are
accessible from the parent component. Sometime you might not want this to happen.

You can use context.expose() method to expose some properties or methods from a
component. When other components use that component, they will be able to access
only the exposed properties and methods.

In this way, you can isolate some functionalities within a component. Let’s see an
example.

<template>
<section>
<h2>{{count}}</h2>
<button @click="resetCounter">Reset</button>
<button @click="stopCounter">Stop</button>
</section>
</template>

<script>
import { ref } from 'vue';

export default {
setup(props, context) {
const count = ref(0);

const timer = setInterval(() => {

count.value++;

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setup… 8/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

}, 1000)
const resetCounter = () => {
count.value = 0;
}

const stopCounter = () => {

clearInterval(timer);
}

context.expose({resetCounter})

return {
count,
resetCounter,
stopCounter
}
}
}
</script>

In this example, I have a CountDown component that displays the count variable and
updates it every second.

It also has 2 buttons. One button resets the count variable and another button stops the
counter.

Inside the setup() function, I am using context.expose() method to expose the

resetCounter() function. You have to pass an object in the expose() with all the
properties and methods that you want to expose from a component.

// App.vue

<template>
<CountDown ref="counter" />
<button @click="resetFromParent">Reset from Parent</button>
<button @click="stopFromParent">Reset from Parent</button>
</template>

<script>
import CountDown from '../components/CountDown.vue';
import { ref } from 'vue';

export default {
components: {MyComponent, CountDown},

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setup… 9/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

setup(props, context) {
const counter = ref(null);

const resetFromParent = () => {

counter.value.resetCounter()
}

const stopFromParent = () => {

counter.value.stopCounter()
} Open in app
return {
counter,
Search Medium
resetFromParent,
stopFromParent
}
}
}
</script>

In the App component, I am using the CountDown component. I have added a template
ref to obtain a reference for the CountDown component.

Inside the setup() function, I have two functions. The resetFromParent() function calls
the resetCounter() function from the CountDown component. The stopFromParent()

function calls the stopCounter() function.

Context Argument in Vue 3 Composition API Script Setup

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 10/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

But when I try to call the stopCounter() function, I receive an error. Because the
CountDown component only exposes the resetCounter() function.

If you don’t explicitly expose using the context.expose() method, App component will
be able to use all the properties and methods available inside the CountDown

component.

Also Read: How to Truncate String in Laravel?

Use of context.slots
Inside the setup() function, context.slots gives you access to the render methods for
slots. These methods are useful especially when we write custom render functions
without using templates.

Vue always recommends using templates. Because it is easy to use. But if you want to
use pure JavaScript or you have a special need to use the render function, you can
create your own.

// ShowHeading.vue

<script>
import {h} from 'vue';

export default {
props: {
level: Number
},

setup(props, context) {
return () => h(
`h${props.level}`,
{}, // Optional: props and attributes

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 11/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

context.slots.default() // Rendering default slot

)
}
}
</script>

In this example, I am creating a component with a custom render function. This

component accepts one prop and displays HTML heading tags according to the prop.

Context Argument in Vue 3 Composition API Script Setup

Now you can use this ShowHeading component in other components like this:

<template>
<show-heading :level="2">Heading 2</show-heading>
</template>

The above code will show a <h2> tag in your DOM like this:

<h2>Heading 2</h2>

You can give any number from 1 to 6 as the level props. Then the ShowHeading

component will return a heading tag according to the number. And this component
will accept the text as its default slot.

How To Use Context Properties Inside Script Setup in Vue 3

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 12/26
9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

If you don’t want to use setup() function in the composition API, there is another way
to write your Vue 3 components.

You can use the script setup syntax instead. There are many advantages of using script
setup syntax over the setup() function.

You get better runtime performance.

You can write clean code with less boilerplate.

You can declare your props and emit events using pure TypeScript.

That’s why I always prefer to use this syntax and it is also becoming the industry
standard for any Vue 3 application.

Now the question is, if you don’t use the setup() function, how can you access the
context properties?

Let’s see how we can use all 4 context properties in the script setup syntax in Vue 3
composition API.

useAttrs() Function in Vue 3

To access attrs object in the script setup, you have to use a helper function from Vue.
You can import the useAttrs() function directly from the vue package.

<script setup>
import { useAttrs } from 'vue';

const attrs = useAttrs();

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 13/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

console.log(attrs);
</script>

When you call that helper function, it will return the attrs objects. This function is the
same object that we get in the context argument.

Now, you can access any non-prop attributes from the attrs object in the script setup.

Also Read: How to Convert Image to Base64 in Laravel?

defineEmits() Function in Vue 3

To send a custom event from the script setup syntax, there is a helper function in Vue
3. The name of this function is defineEmits() .

This function is automatically available inside the <script setup> syntax. You don’t
have to import this function from vue package.

<script setup>
const emit = defineEmits(['hide']);

const hideTitle = () => {

emit('hide')
}
</script>

You have to call the defineEmits() function with the array of event names that you
want to emit for the component. This function returns another function.

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 14/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

Now, when you want to emit an event, you can call the emit() function with the name
of the event. You can also pass any data as a payload in the second argument of the
emit() function.

defineExpose() Function in Vue 3

Unlike the setup() function, the <script setup> is close by default. It means that when
you define a component using script setup syntax, the parent component can not
access any properties or methods from its child components.

Therefore, if you need to use any properties or methods in the parent component you
have to expose those explicitly from the child component.

You have to use defineExpose() function to expose any properties or methods from a
component. This function is available inside <script setup> by default. So, you don’t
have to import it from anywhere.

<script setup>
import { ref } from 'vue';

const count = ref(0);

const timer = setInterval(() => {
count.value++;
}, 1000)

const resetCounter = () => {

count.value = 0;
}

const stopCounter = () => {

clearInterval(timer);
}
defineExpose({resetCounter})

</script>

I am calling the defineExpose() function with an object which contains all the property
and method names that I want to expose from this component.

In this case, I am exposing resetCounter() function. But You can expose multiple
things at once using this function.
https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 15/26
9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

Also Read: How to Get Browser Name and Version in Laravel 9?

useSlots() Function in Vue 3

To get the render methods for slots inside <script setup> in Vue 3 composition API,
you have to use the useSlots() helper function.

You have to import this helper function from the vue package.

<script setup>
import { useSlots } from 'vue';

const slots = useSlots();

console.log(slots.default());
</script>

When you call the useSlots() function, it will return an object. This object will contain
all the render methods for slots.

Now, you can call those render methods using this object.

Conclusion
Today, We had learn Context Argument in Vue 3 Composition API Script Setup. Hope
this tutorial helped you with learning Vue 3. If you have any question you can ask us at
comment section below. If you like the tutorial please subscribe our YouTube Channel
and follow us on social network Facebook and Instagram.

Composition API in Vue 3 has very powerful tools and gives you different ways to create
your application. It also allows for writing reusable code.

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 16/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

The context argument is part of the composition API. Through this, you can access 4
component functionalities that are available in the options API.

In this article, we’ve learned about the properties of context arguments. You also have
seen examples of using attrs , slots , expose , and emit in the compositions API
setup() function.

You have also learned how to use those context functionalities inside <script setup>

in the Vue component.

I have tried to show you everything about the context argument in Vue 3 composition
API setup function along with the script setup syntax.

Also Read: How to Use Vue 3 Expose in Composition and Options API

September 16, 2022, Originally published at laraveltuts.com 10 min read ・

Vue Script Setup Context Argrument Composition API

Follow

Written by LaravelTuts
631 Followers

Passionate coder & lifelong learner 🚀

Expert in Laravel, Web Dev 💻 Empowering others to build, innovate, &
succeed through coding 🌐
https://laraveltuts.com

More from LaravelTuts

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 17/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

LaravelTuts

How to Install and Run PHP 8.x on Ubuntu 20.04

Hello dev, Today we are going to learn How to Install and Run PHP 8.x on Ubuntu 20.04. This
tutorial will cover on installing and running…

· 4 min read · Jul 28, 2022

23 4

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 18/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

LaravelTuts

Laravel Send Welcome Email After Registration Example

Today we are going to learn Laravel Send Welcome Email After Registration Example. In today’s
digital age, user registration is a common…

· 3 min read · Sep 4

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 19/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

LaravelTuts

Laravel 10 Application with Vue 3: Complete Guide to CRUD Operations

Laravel 10 and Vue 3 are two widely-used web development frameworks, with Laravel being a
popular PHP framework and Vue 3 being a…

· 9 min read · Apr 19

120 5

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 20/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

LaravelTuts

How to Login with Google in PHP

This tutorial is about how to login with Google in PHP. Now a day visitors like to login to social site
rather than register the account…

· 8 min read · Jun 21, 2022

21 3

See all from LaravelTuts

Recommended from Medium

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 21/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

Serpentarius13 in ITNEXT

How to build a reusable modal component in VueJS

with few simple steps

13 min read · May 4

67 2

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 22/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

Seliesh Jacob

Unveiling Mind-Blowing Laravel Features

Introduction

4 min read · 6 days ago

61

Lists

Coding & Development

11 stories · 194 saves

Company Offsite Reading List

8 stories · 51 saves

New_Reading_List
174 stories · 119 saves

Natural Language Processing

643 stories · 249 saves

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 23/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

Hafiz Riaz

Setting Up Laravel 10 with Vue3 and Vuetify3

A complete guide to seamlessly integrating Vue3 and Vuetify3 into Laravel 10 using Vite.

4 min read · Sep 16

Tanbamrung W

🤔 Building Reusable Components that are ACTUALLY Reusable with Vue.js

🔥
When we talk or discuss about creating UI components in Vue.js, reusability is often brought up.
Yes, one of the key principles of Vue.js…

12 min read · Sep 7

18

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 24/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

adam waheed

Creating Reusable and Composable in VueJs with Pinia Store:

Problem

5 min read · Jun 9

15

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 25/26

9/26/23, 6:15 PM Context Argument in Vue 3 Composition API Script Setup | by LaravelTuts | Medium

mesutbesagil

Micro Frontends: Breaking Big Applications into Small Parts With Vue and
Vite
Modern web applications are becoming increasingly complex and new approaches are required to
manage this complexity. Micro frontends offer…

4 min read · Sep 12

24 1

See more recommendations

https://medium.com/@laraveltuts/context-argument-in-vue-3-composition-api-script-setup-e6497c61974b#:~:text=The context argument in Vue,is using script setu… 26/26