Javascript is required
Weekly Vue News Logo Weekly Vue News
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 5px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #94 - What's New in Vue 3.3 #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #94

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:

What's New in Vue 3.3

Vue 3.3 "Rurouni Kenshin" is now available and "is focused on developer experience improvements".

I want to give you a quick overview of some of the highlighted features in Vue 3.3. Read the full article if you are interested in all changes of this new version.

Props Destructuring

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">
2const { counter = 0, testId = 'counter' } = defineProps<{ counter?: number; testId?: string }>()

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>
2const modelValue = defineModel()
6 <input v-model="modelValue" />

This feature is experimental and requires explicit opt-in.

Improved TypeScript Type Support

The Vue 3.3 compiler can now handle imported types and a limited set of complex types:

1<script setup lang="ts">
2import type { Props } from './foo'
4// imported + intersection type
5defineProps<Props & { extraProp?: string }>()
Generic Components

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">
3 items: T[]
4 selected: T
More Ergonomic defineEmits

Vue 3.3 provides a "more ergonomic" way to type defineEmits:

1<script setup lang="ts">
2const emit = defineEmits<{
3 foo: [id: number]
4 bar: [name: string, any[]]
Use console in the template

You can now use console in your template:

1<script setup>
2import { ref } from 'vue'
4const count = ref(0)
8 <h1>{{ count }}</h1>
9 <button @click="console.log(++count)">Increment</button>
Curated Vue & Nuxt ContentπŸ“• Optimizing A Vue App
πŸ‘‰πŸ» In this article, Michelle Barker will walk you through some of the
front-end optimization tips to keep our Vue apps as efficient as
πŸ“• Migrating from Vue 2 To Vue 3 – Deprecated and Updated Features
πŸ‘‰πŸ» This article discusses some of the key features from Vue 2 that have either been deprecated or updated in the release of Vue 3
πŸ“• Nuxt 3: Data Fetching Basics
πŸ‘‰πŸ» This article examines the different methods Nuxt provides us for data fetching.
πŸ“• Yes, here are 3 ways to create a multiple layout system with Vue 3
πŸ‘‰πŸ» 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.
πŸ› οΈ NuxtLego
πŸ‘‰πŸ» Unstyled components for building your Nuxt content quick & beautiful.
πŸ‘‰πŸ» Includes components like Social Share, Website Card and more.
πŸ› οΈ Nuxtr
πŸ‘‰πŸ» 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.
Quote of the weekCurated Web Development ContentπŸ“• 50+ ChatGPT Prompts for Web Developers
πŸ‘‰πŸ» This article provides over 50 prompts and strategies that will help you speed up your web development workflow using ChatGPT.
πŸ“• Don’t use custom CSS scrollbars
πŸ‘‰πŸ» Eric explains why custom CSS scrollbars are an accessibility concern.
πŸ› οΈ DivMagic
πŸ‘‰πŸ» A Chrome extension to convert elements directly into Tailwind CSS (including colors).
πŸ‘‰πŸ» See it in action:
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
Β© 2023 All rights reserved.