TresJS, a declarative way of creating 3D scenes from Vue components

Meet TresJS ▲ ■ ●, a declarative way of bringing the magic of ThreeJS using everyday Vue Components and composables. Think of it as React-three-fiber or Lunchbox but without the need of a custom renderer. It just works.

Are you ready to add a new dimension to your Vue Apps?

Rate this content
Bookmark
Video Summary and Transcription
The talk introduces TresJS, a library for creating 3D scenes using Vue components. It highlights how TresJS is a lightweight and TypeScript-supported solution for developers interested in 3D development without dealing with the complexities of WebGL. The speaker shares their journey from telecommunications engineering to front-end development, leading to the discovery of Three.js and subsequently TresJS. The focus is on making 3D development more accessible for the Vue community. Developers can start by adding the Three.js core as a dependency and using TresJS components like TresCanvas and TresPerspectiveCamera to set up scenes. The talk also mentions the release of the Cientos package, which offers additional structure and shaders for easier 3D scene creation. Examples of practical applications include product customization interfaces and storytelling in 3D, with TresJS supporting both 3D and 2D graphics. The speaker emphasizes the community-driven nature of the project and its open-source status, inviting contributions from developers.

FAQ

Alvaro Saborido is originally from Venezuela and currently serves as a Dev Rel Engineer at StudyBlock. He is based in Barcelona, Spain, and actively creates content on Alvaro.Dev labs.

Troy.js is a custom renderer that allows the creation of 3GS scenes using Vue components and composites. Key features include up-to-date compatibility with the latest 3GS, lightweight design, TypeScript support, and optimized performance for web applications.

Developers can begin using Troy.js by adding it to their project with the command 'pnpm add 3GS core'. As a pure dependency, they also need to install the '3' package separately, ensuring it's not part of the initial bundle.

Alvaro was motivated by the need to create a 3D ecosystem specifically for the Vue community, enabling the creation of 3GS scenes within Vue applications without the complexities typically associated with 3D development.

Yes, Troy.js can be used with older versions of Three.js provided that these versions are manually installed. However, it is designed to work seamlessly with the latest version of Three.js by default.

Troy.js can be used for product customization interfaces, such as allowing users to customize colors and materials of products like shoes or cars. It also supports immersive, interactive 3D experiences for storytelling and brand engagement in web applications.

1. Introduction to 3D with WebGL and View Components#

Short description:

Hello, London. How's it going? I'm from Venezuela, so my Venezuelan accent will arise. I create a lot of content in Alvaro.Dev labs. I really wanted to learn how to create video games. I ended up being a telecommunications engineer and then being a front end development where I'm here right now, I'm super happy. But I left like 3D on the side, okay, I thought it was for people that were truly brilliant in genesis, like how they do that stuff, until I discovered 3GS, okay?

Hello, London. How's it going? So first of all, I will apologize by my really bad English. Unfortunately, I don't have a charming accent as Daniel Rowe or British accent, so sorry for murdering your language. I will try my best.

Okay, I'm from Venezuela, so my Venezuelan accent will arise. So how many of you have done 3D with WebGL or...okay. More than I expected, so what if I told you that this scene right here that is kind of a potion wizardy scene is entirely done with View Components and Composers? Okay.

So in the beginning, the name of my presentation today was going to be Trace.Yes a declarative way of doing 3D with Web Components. But I have been playing Whole World Legacy like crazy the last year and I thought to myself, well, let's change it. Okay. Boring naming, let's change that. And I come up, well, no, Chad GPT come up with this. Trace.Yes and the Chamber of View unlocking the mysteries of 3D rendering. So with that, I present myself. My name is Alvaro Saborido. I'm a dev rel engineer at StudyBlock. I'm from Barcelona, Spain, but originally from Venezuela. I create a lot of content in Alvaro.Dev labs. Some links if you want to follow, say hi, always welcome. Okay.

Yeah, that's actually me. I don't know what happened. But that's the boy who lives playing video games, because yeah, I was a kid that loved to play video games. And to be honest, that kid never grew up. This is me playing with my cat, Geralt. So what was my motivation when I was a kid? I really wanted to learn how to create video games. Okay, I was fascinated by that golden era of PS1 games like Crash Bandicoot, Spider the Dragon, and who will forget that good game of Hogwarts like Harry Potter with those amazing graphics. Look at that. HD right away, right?

So something to point here, I wanted to study that, but it was really expensive in Minnesota to be a game developer, so I ended up being a telecommunications engineer and then being a front end development where I'm here right now, I'm super happy. But I left like 3D on the side, okay, I thought it was for people that were truly brilliant in genesis, like how they do that stuff, until I discovered 3GS, okay? So 3GS is a library that leverages the WebGL part, okay, the difficult part, and make it available for JavaScript developers to code and make their scenes.

2. Introduction to Troy.js and its Benefits#

Short description:

I found an amazing course by Bruno Simon that taught me how to create my own scenes in 3D. Then I discovered React 3Fiber, a library that allows you to create scenes with React components. But since I prefer Vue, I looked for a similar solution and found Troy.js, a custom render that allows you to create 3GS declaratively using Vue components. Troy.js is lightweight, up-to-date, and provides a great developer experience with TypeScript support. It's performant and works well with reactivity thanks to bit.

And I found out this amazing course by Bruno Simon, it's the one in the picture, to learn to do it. And six months after that I was learning, and I was able to create my own scenes.

Then I discovered React 3Fiber, and wait, before you say why you're talking about React in a Vue conference, right? I know. But React 3Fiber is an amazing library made by PoeMandress, which is an amazing studio, and they made something that blew my mind. They were basically able to create a scene with their React components. So instead of using plain JavaScript, they were able to use that. But there is a catch here, is that I will never use React. No, I'm joking. I use React but I prefer Vue, okay? Never!

So I was trying to find something that would work for Vue, okay? So I came up with this amazing library, Yes, this is probably the one you know because it was the first one to try to do a wrapper. So it was a manual wrapper that tried to replicate all the different components. And then I found Lunchbox, that is the other one, that is a custom render. And stay with that phrase, custom render, okay? But the thing was that Troy.js was really difficult to maintain. Because it was a manual wrapper and to be honest, 3GS is always a old, every week there is a new version. It's really difficult to keep up with the changes. So that's how Troy.js was born.

Okay, so what is Troy.js? It's basically a custom render that allows you to create the 3GS declaratively by using your favorite framework. Using view components and composites. The word is the Spanish word for tree. So it's 3GS. And it's based on the 3GS library and as well because the French war was already taken. So I came up with that. Why Troy.js? Look, why not using another one? I wanted to create something that was up to date with the latest 3GS with fewer to non-maintainers because also maintain a library like this is really time-consuming and a lot of effort, right? It's lightweight that you could install it and the performance of your web application or page is not affected. That was verbose and easy to use. That's really important for the developer experience. Of course, developer experience focus. We needed something that was enjoyable to do 3D. TypeScript support. Everyone that has worked with 3GS knows what I'm talking about. And that could be performant even with reactivity because 3GS is powered with bit. So bit makes it possible that all goes well.

3. Setting up a 3D Scene and Objects in Tress#

Short description:

I wanted to create the 3D ecosystem for the Vue community. To get started, you can add the 3GS core as a pure dependency or play with it on a stack grid. Import the Tress canvas component from the core and add it to the template. Set up a scene by creating objects, a camera, a scene, and a render. Use the tres way by importing the tres canvas and a tres perspective camera. Add an object using Torus geometry and define a material for the desired appearance.

Last but not least, I wanted to create the 3D ecosystem for the Vue community. Myself and a lot of colleagues, we wanted to create 3DS scenes, so we were not able to do it because there was nothing like for Vue. Okay? So, how we can get started pnpm add 3GS core, and as a pure dependency you can install 3, so it's not part of the bundle, or you can play with it on a stack grid.

And look how cool is this? I'm using a slide up, so this is like a markdown, okay? And I embedded one of the basic scenes right is Tress. So you can put it on your slides. So first thing, like how to use it, right? So we need to set up a canvas. 3GS work with a DOM element, the canvas element to draw everything. So before we can create a scene we need to import the Tress canvas component from the core and add it to the template. Really important that everything that we want to render in our scene needs to be inside because the Tress canvas will create a custom render that works for the 3D scenes, like the 3DS instances and objects.

We need for setting up a scene three things. We need an object, and I always say three things, it's actually four, sorry. So we have the objects like the geometry, the light, the plane, simulate on the ground, we need a camera to be able to see it, we need a scene to put everything together, and a render to render in the canvas element. So how we can set up a scene? In the left part, yes, we're going to have how you can do it with 3DS, like vanilla 3DS. You normally create a scene using the constructor 3scene. It's visible, right? Yeah. You can do a camera by creating a perspective camera this way, and then you're going to pass the canvas into the renderer. You're using the WebGL render, and last but not least, you're going to use the method render to pass the scene and the camera. Let's do it the tres way. You only need to import the tres canvas. It handles everything from you from resizing the screen, from adapting the aspect ratio, everything is covered, and then you just need to import a tres perspective camera. All the components are the same name as 3GS, but you only need to do a prefix called tres. Now let's add an object. So if you were using plain 3GS, you're probably going to create a geometry. I'm using Torus geometry, but it's basically a donut. I don't know why they didn't call it donut geometry, it's Torus geometry. And these are some of the parameters that you are going to pass. Then we need to define a material. When the geometry is the structure or all the little pixels like vertices and so on. The material is how the pixels are going to look like. What color they're going to have.

4. Creating and Configuring 3D Objects in Tress#

Short description:

You create the mesh by combining the geometry and the material. Then add it to the scene. Use the TraceMesh component and view slots to pass the geometry with arguments. The args prop is used to initialize arguments, while normal props are used for properties. View slots allow passing parameters inside the mesh. Let's do a Demostrum and check the basic trussES application.

Like how reflective they are going to be. Then you create the mesh. They are going to create the mesh, it's the combination between the geometry and the material and then boom, you have your object. You add it to the scene. With 3GS, you have to import TraceMesh component and we are going to use view slots here to pass the geometry with some arguments. You can see that the arguments are exactly the same as we were passing to the constructor here. You can pass any parameter for initializing the constructors using the arch prop.

Then we can do a TraceMesh basic material and pass the color as a prop. That's also possible. And boom, we have a really ugly donut. But we made it. We have our scene, right? Cool. I love that meme. Okay, how does it work in the underground? We are taking the tree latest. We are taking the latest version of tree, and we are taking all the different instances, all the different properties, methods, everything, and we're applying a little bit of magic, which is the K8 custom render. And this is converting everything into view components that you can use.

So let's talk about arguments, because we touched that point just frequently, right? You can initialize any argument like you would do in a tree.js like this, the perspective camera, you are passing the field of view, the aspect ratio and how far and near is it, these values right here. And the way of doing that in tree.js and tree.js is gonna be with the args prop. Then you have normal props, which are similar to the properties, okay? So you can pass them as this, and this is going to be similar to initializing the constructor empty without any parameter and then just change it dot, dot, dot, dot, and you're gonna have the same thing. I mentioned view slots because you can pass parameters inside of the mesh to create something similar like this. So whenever you are passing components inside another component, it's gonna do a reference as if it was an attribute on the initial or the parent one. So, yeah, let's do some Demostrum. Yeah, I know, the spell went wrong and it's my first live coding, so be kind with me, please. Of course. I know, this is actually the page. Let me check, where is it? Here. Nice. Okay. So, you saw that it was black pitch, right? Because we need a camera to be able to see it. So, here you have the most basic trussES application.

5. Using trussCanvas and Adding Objects#

Short description:

You have imported the trussCanvas and passed in a clear color. Then, you added a truss perspective camera without any parameters. Next, you added a cube using the TressBoxGeometry and a normal material. Finally, you imported the use render loop composable to access the render loop provided by Tress Canvas.

You have imported the trussCanvas and I'm passing in a clear color, which is basically gonna be the background color. Okay. So, here I'm going to do truss perspective camera. I'm not gonna pass any parameter. Okay? I'm gonna save. And then where are you? Let me put it right away. So, I'm not doing this so often. Sorry about that. Now, we can see the color that we defined. So, we're in the right track. Right?

Now, let's do something else. Let's add a cube. So, the way we can use a cube is by passing tress mesh. And then inside of it, let's use the TressBoxGeometry. That one. And this is recent. Because in the version 1, we didn't have TypeScript. So, this was a memory before. let's add normal material. And now we have a nice cube, right? Thank you. So, glad that it worked.

We're gonna do another thing that's really cool. So, I mentioned also composables, right? So, we are gonna import a composable. That is called use render loop. In gaming and in 3D in general, you are rendering frame-per-frame because if you do an animation, you're gonna render several pictures in a timely manner that you are gonna see smoothly. 60 frames second. That's on. So, Tress Canvas already does that for you. It creates that render loop. And you can access it by using the composable use render loop.

6. Animating Objects with Tress and Reactivity#

Short description:

We are going to use the composable to animate our cue. Reactivity in Tress is based on proxies, which can cause a drop in frame rate. To overcome this, we will use template refs, specifically a shallow ref, to efficiently get the instance of the component. This will allow for smoother animation.

So, we are gonna use the composable to animate our cue. And here comes something really important about reactivity and the use of Tress. So, you know that viewer activity is based on proxies, right? So, you could think right now, okay, if I want to animate it, I will do something like rotation, then I don't know, a ref or reactive. Okay? It's just an example. And pass it to the mesh as a property, right? So, we will do like position and then like this. This will work. Okay? But since this is reactive, your frame per seconds are gonna drop. Because view reactivity is based on proxies. They're not as fast as plain objects. So, the recommended way of doing this is actually let's get rid of this rotation right here. Okay? And we are going to use template refs. Anyone familiar with template refs? In view? Okay. So, basically template ref is a way that you can get the instance from the template for that component. Okay? So, here I'm going to create a box ref. Come on. And you're going to see that I'm using a shallow ref. Amazing for activity. Because shallow ref will allow you to be more efficient. Oh, five minutes. Okay. I'm going to do it way more quicker.

7. Animating Objects and the 'Cientos' Package#

Short description:

We're going to rotate it. So, let's hope this works. Yay! It worked! Okay. I will never do this again. My idea was an ecosystem of applications, packages, and more. We have another package called 'Cientos' that includes all the structure, shaders, and geometries. It's easier to use and not included in the core package due to size.

So, we're going to watch... We're going to pass it here. Sorry. Do this one. Box ref. Not like this. And we're going to watch probably watch effect. No. Not even. We're going to go here and say if box ref value. If it's available and it's not now. Okay. Probably move this up. We're going to rotate it. So, let's hope this works. Yay! It worked! Okay. I will never do this again. Let me refresh this and go to the... where is it? Here. Okay. Real quick.

So, my idea was this was an ecosystem of applications, packages and so on. We have another one that I didn't use in the demo. I forgot. It's the package. And it's the word for hundreds in Spanish. And basically, it's all the structure, all the, like, shaders, all the different geometries. Easier to use. You can have it in a Cientos. Why not in the core package? Because of size.

8. Introduction to 3ds Ecosystem and Open Source#

Short description:

The core package is bare, but for a better developer experience, you can use Cientos. 3ds is meant to be an ecosystem, and we have a roadmap for future development. We are trying to translate the docs, create presentational controls, and more. Resources include documentation, Stack Blade Discord, and tutorials on my YouTube channel. I want to highlight the amazing effort of all the contributors. This project is about to be open source, and I have the help of amazing contributors. Let's change the visibility on GitHub and make it open source.

So, the core package is bare. You can do everything with that. But if you want to have a better developer experience, you can use Cientos. Okay? And also, I know it's a bad joke, but 300 is like 300. Okay. Enough. Sorry about that. So, here I have some of the structures. Like text, 3D, you can create text in 3D. You can use animations. You can load models like the one that I put in the beginning is using this composable right here. So, everything that is extending the core, okay? Oh, let me refresh now.

So, one of the structure, for example, is the float or the Levioso component. That allows you to float whatever you put inside. So, if you put a feather, you're gonna have like Levioso, like Hermione. Okay? 3ds is meant to be an ecosystem, so the core package and the Scientos is maintained by us. We have in the roadmap, the post processing one is already in work. And who knows, like maybe yours package can be part of the ecosystem in the future. This is a roadmap. I want to highlight the work of the Nuxt Lab team because this is Volta and I'm using it with my team to be able to establish a roadmap and be clear about the priorities and so on. So you can see that we are trying to translate the docs, create the presentational controls, HTML, contact shadows and some fancy stuff. Some resources here, my slides are going to be available as soon as I fix them because I don't know, I have a problem with the slide web but here are the documentations, Stack Blade Discord and some tutorials on my YouTube channel. I want to highlight the amazing effort of all the contributors because this is about to be open source and I have the help of amazing contributors that helped me like Jaime Torrella, Tino, Will, Konstantin, Brandy, Maddie and in the future maybe you. So a lot of people have asked me like, why is it not open source yet. Let's basically change that. So I'm going to go to GitHub. Where are you? And let's change the visibility to bullet. Yeah, I have read effects. Come on. Seriously? This was meant to be my moment.

9. Release and Gratitude#

Short description:

We are releasing version two and the Cientos package today. I'm grateful for the support of my sponsors and contributors, and I encourage others to contribute as well. Special thanks to Cody Bennett, Patrick, Daniel Rowe, and Shaq for their help. The demos were amazing, and you handled the 2FA issue like a pro.

Come on. Brilliant. Yes. Please. There you go. It's published. So from now on, version two, we are going to release it today, this release candidate, but we are going to release it today as well as Cientos package. And the rest of the packages are already there. Okay. And if I find myself again, I don't know how much I have, but I do want to say something else.

No. Okay. So I spend, go there, open tickets, crash it, contribute, I'm waiting for it. I really love how people are using it already. So show me your stuff. I will be more than glad to put it on the playground. Thanks to my sponsors, Sunny Devs, Smart Bakes, EZ Teams, Kisu, Masterjury and Storyblock. That was my sponsor before I joined the company. Right now, I'm setting up the sponsor for Tress ES to be able to also sponsor my team. So that will be the idea. If you can contribute, amazing. And a special thanks to Cody Bennett from PMAndrez that helped me with the custom renderer API. And thank Patrick for their showcase and help. Yeah. And Daniel Rowe for all the help and also Shaq from PMAndrez team. So thank you very much. Thank you so much.

That was wonderful. So magical as well, I loved all the demos. Also I've never seen 2FA kill someone's vibe like that but you handled it like a pro.

10. Compatibility with Older Versions and Use Cases#

Short description:

Can you use Trez.js with an older version of Three? Yes, if you install that older version of Three. What sort of projects or use cases are there for Trez.js? You can use it for non-3D or AR-based projects. Someone did a POC for their company using Trez.js and created an amazing animation with a shoe.

All right. We've got so many questions coming in. We're also working on trying to make sure everyone gets warmer as well. But first question. This is amazing. First of all, can you use Trez.js with an older version of Three like maybe an ancient from say a month ago or other components and arguments bound to the latest version? So you can use it with Vue 3. I haven't make it possible with Vue 2 yet. Time. But since it's gone out so the official support is going to eventually drop. So I was focusing on Vue 3. But the last part of the question, what was it? Objects. Or are the components and arguments bound to the latest version of Vue. Of Three. Sorry. My bad. Okay. So it's the versions of Three. Yes. Yeah. So when you install at the beginning that you add the Trez.js core and you install Trez.js, that's going to be the latest version of Three and it's going to work right away. So because it's mapping everything that is then. So if they launch tomorrow a new, I don't know, shader or a new property is going to be available right away. And would it work with older versions of Three? If you install that older version of Three, yes. Okay. Perfect. Awesome.

And someone, I love this question, what sort of projects or use cases are there for Trez.js? Or to paraphrase, how can I convince my boss to use this on something that's not 3D or R-based? This person really wants to get their hands on it. Wow, that's amazing. I love to hear that. Honestly, like yesterday, somebody wrote me that they he was doing a POC for their company using Trez.js and they made this amazing animation with a shoe.

11. Product Customization and the Future of Trust.js#

Short description:

It was a shoe like Nike. They were doing all this amazing stuff like changing the camera. Product customization allows users to customize their product. Recently, I did a POC with Storyblock, a car configurator. Storytelling in 3D is immersive and engaging. Trust.js can be used for both 3D and 2D graphics. The future of Trust.js looks promising with the introduction of WebGPU in Chrome's latest release.

So it was a product like selling a product. It was a shoe like Nike. And they were doing all this amazing stuff like changing the camera. There is product customization. So you, for example, give to your clients, to your users the opportunity to customize their product. So they are buying some shoes that you can customize how you like what the colors, the materials, all those kind of things.

I recently do a POC with Storyblock. That's probably going to be my next topic of talks. A car configurator. So the car industry normally allows the user to put the different materials like painting or the ring color. It's something you can do with 3D, and it's an interactive way to be with your audience. Storytelling. For agencies, for brands, you don't know how much people love to enter a page and be immersed in the experience, and you can tell your product on a 3D way. That will be the first ones. But if you have anything in mind, drop me a message in Alvaro Savo, and let's talk. I'm more than happy to help. Awesome. Awesome.

And you showed us some 3D graphics. Can it be used also, can Trust.js be used for 2D graphics? Yeah. Easy. Easy question. All right. Another one about the future of Trust.js. Now that Chrome has introduced WebGPU as part of their latest release, where do you see the future of these libraries going? I'm really excited about that because a lot of things are changing in the 3D ecosystem. I'm talking with a lot of web engines that are doing POCs with that. I'm going to add a POC with the same as 3DS to try to make it work. But it's where the future is, and hopefully it's going to be smooth to transit to there. Cool. I thought I'd save this question until last, but it's my favorite question of them.

12. Slytherin-like Quality and Persistence#

Short description:

What is your most Slytherin-like quality? The audience upvoted it. It was the number one question. Persistence. Persistence.

What is your most Slytherin-like quality? The audience upvoted it. It was the number one question. Okay. How do you say that in English? Hardhead? Until I do it, I don't ... Sorry, my English ... No, no worries. I don't give up. Nice. Persistence. Persistence. Awesome, awesome. Let's give a massive round of applause.

Alvaro Saburido
Alvaro Saburido
27 min
12 May, 2023

Comments

Sign in or register to post your comment.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
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.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
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.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
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.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
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.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
Watch video: Vue: Feature Updates
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.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
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.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
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
How to make amazing generative art with simple JavaScript code
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
Top Content
WorkshopFree
Frank Force
Frank Force
Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
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
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
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.
Going on an adventure with Nuxt 3, Motion UI and Azure
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
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.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- 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