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

Rate this content
Bookmark

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?

Alvaro Saburido
Alvaro Saburido
27 min
12 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The speaker discovered 3D with 3GS and was inspired to create a 3D ecosystem for the Vue community using Troy.js. The process of setting up a 3D scene and objects in Tress was explained, along with creating and configuring 3D objects. The talk also covered animating objects with Tress and the 'Cientos' package, as well as the future of Tress.js and its compatibility with older versions of Three. The speaker expressed gratitude to sponsors and contributors and highlighted the potential for product customization with Tress.js.

Available in Español

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.

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
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
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 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
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
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The creator of Vue js gives an update on the new features of the technology.
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
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

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 Kuznetcov
Mikhail Kuznetcov
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.
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
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
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.