#title Weekly Vue News #94 - What's New in Vue 3.3 #preview Ready for your weekly Vue & Nuxt dose?
What's New in Vue 3.3
Hi 👋
In this issue, we're diving headfirst into the shiny new features of Vue 3.3. Trust me, there's a lot to be excited about!
But wait, there's more! As always, I've curated a collection of amazing content about Vue.js, Nuxt.js, and web development in general.
So, sit back, relax, and get ready to level up your Vue.js and Nuxt.js game.
Have a lovely week ☀️
To support me:
- 😘 Recommend the newsletter to your friends: it really helps!
- 💸 Sponsor the newsletter
- 🧵 Retweet the latest Twitter thread
- 📨 Reply to this email: feedback is welcome
Vue 3.3 "Rurouni Kenshin" is
I want to give you a quick overview of some of the highlighted features in Vue 3.3.
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:
1 <script setup lang="ts">
2 const { counter = 0, testId = 'counter' } = defineProps<{ counter?: number; testId?: string }>()
3 </script>
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:
1 <script setup>
2 const modelValue = defineModel()
3 </script>
4
5 <template>
6 <input v-model="modelValue" />
7 </template>
This feature is experimental and requires explicit opt-in.
The Vue 3.3 compiler can now handle imported types and a limited set of complex types:
1 <script setup lang="ts">
2 import type { Props } from './foo'
3
4 // imported + intersection type
5 defineProps<Props & { extraProp?: string }>()
6 </script>
Your components can now accept generic type parameters via the generic attribute if you are using <script setup>:
1 <script setup lang="ts" generic="T">
2 defineProps<{
3 items: T[]
4 selected: T
5 }>()
6 </script>
Vue 3.3 provides a "more ergonomic" way to type defineEmits:
1 <script setup lang="ts">
2 const emit = defineEmits<{
3 foo: [id: number]
4 bar: [name: string, ...rest: any[]]
5 }>()
6 </script>
You can now use console in your template:
1 <script setup>
2 import { ref } from 'vue'
3
4 const count = ref(0)
5 </script>
6
7 <template>
8 <h1>{{ count }}</h1>
9 <button @click="console.log(++count)">Increment</button>
10 </template>
| 👉🏻 In this article, Michelle Barker will walk you through some of the |
| front-end optimization tips to keep our Vue apps as efficient as |
| possible. |
| 👉🏻 This article discusses some of the key features from Vue 2 that have either been deprecated or updated in the release of Vue 3 |
| 👉🏻 This article examines the different methods Nuxt provides us for data fetching. |
| 👉🏻 Layouts are the foundations of medium-to-large websites or apps. |
| 👉🏻 Vue 3 doesn’t have a native layout system, this article demonstrates 3 ways to create one. |
| 👉🏻 Unstyled components for building your Nuxt content quick & beautiful. |
| 👉🏻 Includes components like Social Share, Website Card and more. |
| 👉🏻 An extension for Nuxt.js offering commands and tools to make your experience with Nuxt.js more pleasant. |
| 👉🏻 You can create items (components, pages, layouts, stores, etc.), run Nuxt.js commands from the VSCode command palette, and more. |
| 👉🏻 This article provides over 50 prompts and strategies that will help you speed up your web development workflow using ChatGPT. |
| 👉🏻 Eric explains why custom CSS scrollbars are an accessibility concern. |
| 👉🏻 A Chrome extension to convert elements directly into Tailwind CSS (including colors). |
| 👉🏻 See it in action: https://www.youtube.com/watch?v=QxPAsDSOIrI |
Until next week,
Holzapfelkreuther Str. 19, 81375 Munich, Germany
