Vue 3.3 release focuses on enhancing the development experience with TypeScript and script setup.
The update addresses key pain points in using Vue with TypeScript, improving cross-team productivity.
New features include generic components, define options, and more ergonomic define emits.
The introduction of experimental features like reactive props destructure and define model aims to simplify component development.
Ongoing efforts are focused on Vapor Mode and integrating platform features for a more efficient framework.
The excitement surrounding the recent release of Vue 3.3 is palpable among developers. This new update marks a significant step in improving the development experience, particularly for those using TypeScript. Over the past year, the focus had been on projects like Vite and IDE improvements, but Vue is now turning its attention back to the core framework. This renewed focus promises more frequent updates and a host of new features aimed at enhancing developer productivity.
One of the primary goals of Vue 3.3 is to improve the experience of using script setup in single file components with TypeScript. While Vue initially did not support TypeScript, the framework has evolved to accommodate more complex use cases. The need for a type system becomes apparent in large projects with multiple developers, where maintainability and productivity are crucial. This release addresses historical pain points associated with using Vue and TypeScript, making it a more seamless experience.
The new release introduces several notable features. One such feature is the concept of generic components. In scenarios where developers need to work with lists of items and selected items, the ability to express types using generics simplifies the process. This feature mirrors the flexibility offered by TypeScript's generics, allowing developers to define constraints and multiple type parameters. This advancement is particularly beneficial for library authors who rely on TSX for creating dynamic components.
Vue 3.3 also introduces more ergonomic define emits. The updated syntax, inspired by labeled tuple syntax in TypeScript, offers a cleaner way to define event emission functions. This approach improves type information visibility, making it easier to understand the purpose of different elements within the tuple. The collaboration with Vue macros has further enhanced this feature, ensuring a more intuitive experience for developers.
Another noteworthy addition is the improvement in handling imported types when defining props. The Vue compiler now has the capability to analyze imported types and generate the correct runtime props list. This enhancement addresses the challenge of working with complex types, including intersection types and utility types. While it may not cover every possible type scenario, it significantly improves the development process for most common cases.
Vue 3.3 continues to build on the foundation of the Composition API. The shift towards this API is evident in the introduction of features like define options and the experimental reactive props destructure. These enhancements aim to streamline the process of working with reactivity and default values. By compiling destructured props into reactive properties, developers can enjoy a cleaner syntax and maintain reactivity without additional effort.
The release also lays the groundwork for future developments. The introduction of Vapor Mode represents a significant departure from the traditional Virtual DOM approach. By compiling templates into more memory-efficient and performant code, Vue aims to optimize the development experience further. While Vapor Mode initially supports a subset of features, it promises a lighter, faster, and more efficient framework.
Looking ahead, Vue's roadmap includes stabilizing various features and enhancing platform integration. The focus on leveraging native platform features, such as scoped styles and async context, aligns with the goal of reducing framework complexity. These efforts reflect a broader trend across frameworks, where compiler-driven optimizations play an increasingly crucial role.
The recent release of Vue 3.3 is not just about new features; it's about laying the foundation for a more efficient and productive development experience. The integration of TypeScript, the refinement of existing APIs, and the introduction of experimental features all contribute to this vision. As Vue continues to evolve, developers can look forward to a framework that is more aligned with their needs and the demands of modern web development.
Vue 3.3 is a recent update to the Vue.js framework, focusing on improving the development experience with script setup in single file components and TypeScript. It includes features like imported type support for defining props, generic components, and more ergonomic define emits.
Vue 3.3 enhances TypeScript integration by improving type support in several areas, including the ability to use imported types when defining props and the introduction of generic components. These improvements aim to facilitate cross-team productivity and maintainability in large projects.
Generic components in Vue 3.3 allow developers to specify types that are flexible and reusable, enhancing the capability to build dynamic and complex components. This feature uses TypeScript generics to ensure type safety across different parts of a component or application.
The delay in releasing Vue 3.3 after Vue 3.2 was primarily due to the Vue team's focus on developing Vite and other related projects, as well as enhancements in the IDE side of the ecosystem, such as developing language tools like Volar.
Vue 3.3 addresses challenges in handling imported types by enhancing the compiler's ability to analyze and resolve these types. This includes dealing with various import scenarios, such as relative paths and npm packages, which helps in correctly generating runtime props lists.
Vue 3.3 introduces more ergonomic define emits that simplify the syntax and improve type inference. This update uses labeled tuple syntax to provide better type information and readability, enhancing the overall developer experience when defining component events.
Future plans for Vue.js include continued work on Vapor mode for more efficient code generation, improvements to Vue core, and focusing on native app scoped CSS and async context handling. These developments aim to simplify and enhance performance in Vue applications.
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Hello, UK! Today, I'm talking about the recent feature update in Vue 3.3. The focus was improving the development experience with script setup and TypeScript. Vue initially didn't support TypeScript, but as the user base grew, we rethought parts of the framework to accommodate complex applications. Good TypeScript support enhances cross-team productivity and long-term maintainability.
2. Imported Types for Defining Props
Since the introduction of Script Setup, one of the most wanted features in Vue 3.2 is the ability to use imported types when defining props. The view compiler analyzes the types provided to define props and determines the props that the component expects at runtime. The compiler generates the correct runtime props list, ensuring that the app works.
3. Imported Types and Complex Types Support
In Vue 3.2, the compiler lacked the ability to look inside imported types. However, in 3.2, we managed to support most common cases. We use TypeScript's API for module resolution and parse files to generate the proper type information. There are still limitations, especially for complex types, but for application-level code, it covers most cases. We're working with component library authors to improve their authoring experience and support their special cases.
4. Generic Components and Defined Components
The next big feature in Vue 3.3 is generic components, which allow you to express the type of selected items in a list component. You can use generics, similar to TypeScript, to define the type parameters and constraints. We also introduced a reworked signature for defined components, enabling library authors to use generics directly. This provides more flexibility and better type support when writing complex components with JSX or TSX.
5. Automatic Inference of Runtime Props
We're developing a Babel plugin to automatically infer the runtime props list and inject it into components. This will eliminate the need for manual double declarations and reverse engineering in component libraries. Our long-term goal is to allow TypeScript users to focus solely on types without worrying about the runtime props list.
6. Improved Define Emits and Defined Slots
In Vue 3.3, we introduced more ergonomic define emits, allowing you to declare event types using labeled tuple syntax. This feature is inspired by Vue macros, developed by Kevin, who is now a core team member. If you're interested in exploring experimental ideas, check out Vue macros. Another improvement is the ability to define slots with types, enabling better type checking and error detection in the IDE.
7. Vue Slot Props and Define Slots
The slot props in Vue 3 provide type checks for the default slot. However, the required slots check is not yet implemented. Vue macros can be used with Vue 2.7. Define slots do not have runtime implications, only type level checks.
8. Reactive Props Destructure and Define Model
Here, we are introducing an experimental feature called reactive props destructure. By default, Vue tracks reactivity through dot property access. However, when you structure a prop, you lose reactivity. With the reactive props destructure feature, you can destructure props with default values while maintaining reactivity. This feature automatically adds dot access at compile time, providing a cleaner syntax for declaring default values. Another experimental feature is define model, which simplifies the process of creating custom inputs with model support. Instead of manually declaring props and events, you can use define model to generate a ref that behaves like a normal ref.
9. Mutating Refs and Advanced Level Usage
When you mutate it, it just emits the event back to the parent for you. And because it's a ref, you can bind it to an input with the native v-model. And then there's define options. And there's this little bit of advanced level thing. If you have used composition API and worked with composables, you know Vue-use. When you use Vue-use, it can accept a normal value or a ref. But the problem is, if you want to pass a deeply nested property, it becomes complicated. We provide a new function called toValue to normalize everything to a value. And there's the JsyncPoSource, which has potential implications for TSX.
10. TSX Support and Vue.js 1.0 Beta
If you use TSX with Vue, opt into this now to avoid any issues when the default global registration is removed in 3.4. Vue.js 1.0 beta, the static site generator, will be released soon. Vitepress is recommended as the best documentation tool.
11. Vue Future Plans and Exciting Features
We're planning a round of Vue core issue PR cleanup and prioritizing important issues for the next minor sprint. In 3.4, we aim to stabilize suspense, improve safe teleport, and enhance computer invalidations. We also have exciting plans for Vapor mode and additional platform features. The native app scoped proposal in the CSS Working Group will simplify Vue's scoped style implementation. Async context will track component initialization in async call stacks, and DOM parts will be a crucial compilation target for VaporMode. These developments will make VueCorp simpler and more efficient.
12. Vapor Mode and Unref Compatibility
The Vapor Mode in Vue 3 is a new way to compile templates into a more memory efficient and performant code. It's compatible with the existing component format and offers a lighter and faster development experience. However, it has a limited set of supported features. Additionally, the question about changing unref to support getters is not possible due to the current API design and the potential breaking changes it would introduce.
QnA
Vue API: toValue, TSX, and Composition API
We introduced toValue as a new API that functions similarly to unref but calls functions. When implementing recursive and dynamic components, TSX is preferred for highly dynamic use cases. The Composition API is recommended over the Options API for building large-scale, maintainable codebases, thanks to its better TypeScript integration and composability.
Tips for Working in a Development Team
If you're personally fine with either strict procedures or more flexibility in a development team, it ultimately depends on the team dynamics and mutual agreement. Some level of code convention and enforced rules is necessary for long-term productivity, but being too pedantic can hinder progress. Finding a balance is key.
Vue and Compilation Magic
The trend across all frameworks is towards more compiler magic. React Server Components, SvelteKit, and Solid Start also rely heavily on compilation. The reality is that we are moving towards a more compiler-powered framework scene. Angular is also exploring single file components. I'm not worried about Vue diverging from the JavaScript ecosystem because everyone is embracing compiler-powered frameworks.
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.
Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.
Table of contents: - Introduction to Vue3 - Composition API - Core libraries - Vue3 ecosystem
Prerequisites: IDE of choice (Inellij or VSC) installed Nodejs + NPM
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. Workshop level: Intermediate
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.
Table of contents: - Introduction to vee-validate - Building a basic form with vee-validate components - Handling validation and form submissions - Building validatable input components with the composition API - Field Arrays and repeatable inputs - Building a multistep form Prerequisites: VSCode setup and an empty Vite + Vue project.
Comments