·
3 min read
Vue 3.3 "Rurouni Kenshin" is now available and "is focused on developer experience improvements".
In this article, I give an overview of the highlighted features in Vue 3.3. Read the changelog if you are interested in all changes of this new version.
Props Destructuring
Warning
This feature is experimental and requires explicit opt-in.
I think this is one of the coolest features of the new release. You can now destructure props without losing reactivity and also set default values:
<script setup lang="ts">
const { counter = 0, testId = 'counter' } = defineProps<{ counter?: number; testId?: string }>()
</script>
In my opinion, this is a very clean and "natural" way to define your props. Previously you had to use toRefs in combination with withDefaults to achieve the same result:
<script setup lang="ts">
const { counter, testId } = toRefs(
withDefaults(defineProps<{ counter?: number; testId?: string }>(), { counter: 0, testId: 'counter' })
)
</script>
defineModel
Warning
This feature is experimental and requires explicit opt-in.
Vue 3.3 provides a very elegant way to support two-way binding with v-model. Before 3.3 you had to write a lot of boilerplate code to support it:
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(event) {
emit('update:modelValue', event.target.value)
}
</script>
<template>
<input :value="modelValue" @input="onInput" />
</template>
With 3.3 we can achieve the same functionality with less code:
<script setup>
const modelValue = defineModel()
</script>
<template>
<input v-model="modelValue" />
</template>
In this example, the defineModel macro automatically registers a prop modelValue and returns a ref that can be directly mutated. Additionally. it registers the update:modelValue event.
Improved TypeScript Type Support
In the past, only local types such as type literals and interfaces could be used in the type parameter position of the defineProps and defineEmits compiler macros.
The reason for this was that Vue needed to analyze the properties on the props interface to create runtime options. However, this limitation has been addressed in version 3.3. The Vue compiler can now handle imported types and a limited set of complex types:
<script setup lang="ts">
import type { Props } from './foo'
// imported + intersection type
defineProps<Props & { extraProp?: string }>()
</script>
Generic Components
Your components can now accept generic type parameters via the generic attribute if you are using <script setup>:
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>
More Ergonomic defineEmits
Typing defineEmits was a bit verbose before 3.3:
<script setup lang="ts">
const emit = defineEmits<{
(e: 'foo', id: number): void
(e: 'bar', name: string, ...rest: any[]): void
}>()
</script>
Vue 3.3 provides a "more ergonomic" way:
<script setup lang="ts">
const emit = defineEmits<{
foo: [id: number]
bar: [name: string, ...rest: any[]]
}>()
</script>
Use console in the template
You can now use console in your template:
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<h1>{{ count }}</h1>
<button @click="console.log(++count)">Increment</button>
</template>
In previous versions of Vue, this caused an error: TypeError: Cannot read properties of undefined (reading 'log')
Conclusion
Vue got so much better with this new version. The new features improve the developer experience and I'm very excited to see how the framework further evolves with the next upcoming releases.
For more information, read the official announcement and the GitHub changelog.
If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.
Alternatively (or additionally), you can subscribe to my weekly Vue newsletter:
Ref vs. Reactive: What to Choose Using Vue 3 Composition API?
I love Vue 3's Composition API, but it provides two approaches to adding a reactive state to Vue components: ref and reactive. It can be cumbersome to use .value everywhere when using refs but you can also easily lose reactivity when destructuring reactive objects created with reactive.
A Comprehensive Guide to Data Fetching in Nuxt 3
With Nuxt 3's rendering modes, you can execute API calls and render pages both on the client and server, which has some challenges. For example, we want to avoid duplicate network calls, efficient caching, and ensure that the calls work across environments. To address these challenges, Nuxt provides a built-in data fetching library ($fetch) and two composable (useFetch and useAsyncData).
