Vue 3 Tutorial: Advanced component options

Again, in template, $emit is available out of the box.

Vue 3 Props

Props are similar to emit, you also have to define them by using defineProps. Other things look very similar to Vue 2 options API:

If you are going to use props directly inside the script setup tag, you have to save the value of it to some variable. After that, name props will be available in props.name.

Router and Route

What if you want to use router or route inside script setup tag? Remember how you were able to use this.$router in Vue 2, and use context.root.$router with composition API Vue 2 package? Now, you have to manually import it from vue-router package:

Now you have access to all options on router and route. You can name it whatever you want, but look at that $ sign. If you keep naming consistent as in Vue 2, it’s going to be easier to maintain the code in case there’s someone new in the team transferring from Vue 2 to Vue 3. It’s even better for you, because you won’t get lost in new code. Remember, you don’t have to use .value here. All the settings are available directly on those two variables.

Slots

When it comes to slots, the way of using them in script setup is quite similar to how you handle other built-in methods. You have to access them directly from useSlots composable, available in vue package:

Again, you can name it whatever you want, but to keep consistent, let it be $slots. In template, $slots are available directly.

Template Refs

When you want to bind reference to component or HTML element, you have to use normal ref binding, like when you are creating any other reactive variable:

Yes, you don’t need to define the ref value inside the script tag, Vue 3 is handling it behind the scenes. When you create a ref on a component or HTML element, and add the same ref name inside the script tag, Vue 3 is handling writing that reference into the created variable. Easy and cool!

If you are using template reference inside v-for loop, everything works the same, but you are receiving an Array of ref elements (while writing this article, that feature is still bugged*, but there is a workaround!).

*Update 20.07.2022: With newest Vue 3 version (tested on 3.2.37), the template ref inside v-for loop works as expected. You can get rid of any workarounds, and use it directly, like in documentation. It's still handy that you can use your own function to implement complex operations on refs but you don't have to use it to hack that particular functionality:

Expose

Vue 3 components with script setup are closed, so you can’t access any data when communicating between them. But you can change that behavior by using the built-in method defineExpose. That’s quite convenient, because with that method, other developers will know what functionality is available outside components, it’s like private and public methods:

Now in parent component:

As you can see, age property is acting like a private field, and we can’t access it from the parent component. 

Vue 2 options API and Vue 3 composition API – how to combine them?

Imagine you already have a big, enterprise level project, and you want to migrate to Vue 3, but even thinking about it gives you a headache.

Don’t worry, you can combine both Vue 2 options API and Vue 3 composition API, and make that migration painless:

Now you will see John Smith in your web browser, because Vue 3 has backwards compatibility, which allows you to combine both APIs, or even use options API in one component, and Vue 3 composition API in another. That is really helpful when migrating your project to a new standard. 

🔔 Remember, you can’t use name ref inside the options API. So keep in mind that when migrating, you have to migrate whole singular logic to keep everything working fine:

Vue 3 Lifecycle hooks

There’s also a quite big change in terms of lifecycle hooks. Basics stay the same, but there is no more created available in the Vue 3 component. Now created is everything that you are going to execute inside the script setup tag. So basically every function directly fired is a function which is going to be fired like in Vue 2 created. To be more specific, everything fired inside script setup tag is fired just before the Vue 2 beforeCreate method.

So if you want to get some data from API, you can use IIFE – Immediately Invoked Function Expression combined with async/await:

Of course it’s up to you, if you are going to define a function and then fire it, but for now IIFE is the best option when it comes to asynchronous calls. 

There’s already implemented an experimental feature which is Top Level Await. In this case, you can use await directly inside the script setup tag and combine it with template component <Suspense> which is going to keep the loading state of the Vue 3 component. Unfortunately, it’s in the experimental stage and everything could change in terms of using it. If you want to read more about it, click here.

Other lifecycle methods are transferred to hooks, so you specifically define which one of them you are going to use: