The recent release of Vue 3.3 marks a significant milestone in the evolution of the Vue framework, bringing a series of enhancements and new features aimed at improving the development experience. This release comes after a long hiatus since Vue 3.2, during which the team focused on refining tools like Vite and Volar. Now, the attention shifts back to the Vue core, promising more frequent updates moving forward.
Vue 3.3 is particularly focused on enhancing the use of TypeScript within single file components, addressing historical pain points and making the framework more accommodating for complex applications. This shift is essential as Vue's user base has expanded to include developers working on large-scale projects requiring robust type systems for better maintainability and cross-team productivity.
Enhancements in Vue 3.3
One of the major highlights of Vue 3.3 is the improvement in script setup and TypeScript integration. This release resolves several issues that developers faced when using Vue with TypeScript, particularly in handling complex applications. The focus is on making the development process smoother, allowing for more efficient coding practices.
Vue 3.3 introduces the 'defineOptions' macro, which simplifies the process of declaring options when using script setup. This eliminates the need for separate script blocks, streamlining the setup process.
TypeScript Integration and Developer Experience
Vue 3.3 places a strong emphasis on TypeScript integration. Historically, Vue's initial APIs weren't designed with TypeScript in mind, but as the framework grew, so did the need for a more robust type system. The new release addresses these needs, making Vue more suitable for large teams and complex projects.
The introduction of new TypeScript features, such as the ability to use imported types when defining props, is a testament to Vue's commitment to improving developer experience. This feature allows developers to define props using types from other files, enhancing the flexibility and maintainability of the codebase.
New Features for Component Authors
Vue 3.3 brings several features aimed at component authors, including support for generic components. This allows developers to define components with type parameters, enhancing the ability to create reusable and type-safe components.
The release also introduces more ergonomic ways to define emits and slots, providing better type checking and error detection. These improvements reduce the likelihood of runtime errors, making the development process more reliable.
Advanced Type Handling
The Vue 3.3 release tackles the challenge of handling complex types through a pragmatic approach. While not all advanced types are fully supported, the release covers most common use cases encountered in application-level code.
Component library authors can benefit from the improved ability to work with imported interfaces and utility types, although some limitations remain. The Vue team continues to collaborate with library authors to further enhance the authoring experience.
Experimental Features and Future Directions
Vue 3.3 introduces experimental features like reactive props destructure and defineModel, which aim to simplify component development. These features enhance the reactivity and functionality of components, making it easier to build complex interactions.
Looking ahead, the Vue team plans to continue refining these experimental features and integrating new platform capabilities. The focus is on leveraging native platform features to improve performance and reduce the framework's complexity.
Conclusion
Vue 3.3 is a pivotal release that significantly enhances the framework's capabilities, particularly in terms of TypeScript integration and developer experience. The new features and improvements position Vue as a robust choice for building complex and large-scale applications.
As the Vue ecosystem continues to evolve, developers can expect more frequent updates and enhancements that cater to the growing demands of modern web development. Vue 3.3 sets the stage for a more efficient and enjoyable development experience, paving the way for future innovations.
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