Using Nitro – Building an App with the Latest Nuxt Rendering Engine

Rate this content
Bookmark

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.

This workshop has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Nox Reworkshop appears to be a new application being created using the Noxie CLI, which is the Nox CLI, as part of a demonstration or tutorial session.

To adjust the screen resolution on Zoom for better clarity, you can try changing your screen resolution settings, switching to HD in Zoom, or adjusting your local video settings. If issues persist, it may be due to network connections.

In a NUXT project, the App.Vue file serves as the entry point to the app. It is crucial for the application's operation and replaces the default structure that NUXT provides if deleted.

A TS config in NUXT is used for managing TypeScript configurations, helping to handle aliases and type declarations within the project, enhancing the development experience by providing type support and auto-import features.

To create a new NUXT project using the Noxie CLI, you need to open a folder, initiate the project with the CLI, and configure essential files like App.Vue, NUXT config, and TS config as required.

To improve video clarity during a Zoom meeting, you can adjust the video resolution settings, switch to HD mode, ensure no background applications are consuming significant bandwidth, and check local network conditions.

Daniel Roe
Daniel Roe
117 min
25 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
We will create a Nox app using the Noxie CLI and adjust the resolution of our Zoom screens. Nuxt 3 has a new project structure and setup, with the app.vue file as the entry point. NitroMagic handles API routes and provides runtime config. Nitro has a storage abstraction layer and supports different drivers like Redis. The Nitro server is built in a two-step process and optimized for serverless and edge rendering.

1. Introduction to Nox app creation

Short description:

We are going to create a new Nox app from scratch using the new Noxie CLI. Let's go into another folder and create a new app called Nox Reworkshop. Can we adjust the resolution of our own Zoom screens? If there's anything I can do to make things better, just say!

So... Great. I'll just dive straight in then, and I will... Let's see. I'll spotlight myself so you can see my screen. We are going to create a new Nox app from scratch. So... I am just going to... I seem to have done that by accident in the background. Let's go into another folder, and create a new app, which we'll call Nox Reworkshop. So this is using the new Noxie CLI, which is the Nox CLI. Well, is it unsharp for everyone? There you go. Yep! The resolution of your video screen is a little bit... Yeah....a little bit better. There you go. Can we adjust the resolution of our own Zoom screens somewhere? Because I did not find it immediately. It's better, but it's still interpolated. I think usually, if you change your screen resolution, it solves the problem. Let's see. I'll switch that to HD on Zoom. Has that made any difference for anyone else? Not yet. Not really? I'll see if I can actually change my screen resolution, maybe that might make a difference for you. Filming settings. Feeling any better for people? I mean, it's perfectly legible, I think it should just crack on, because it's probably going to be people's local network connections and Zoom, etc. Okay, super. If there's anything I can do to make things better, just say!

2. NUXT Project Structure and Setup

Short description:

A brand new NUXT project has very little in place. It has an App.Vue file, a NUXT config, and a TS config. The app.vue is the entry point to the app. I'll create a Git repository called Nitro Workshop. We'll check the structure of the project and run the dev server at localhost 3000. The welcome component doesn't work in production, so replace it if deploying a test app. We have some other magic directories like RTS config. Most things from NUXT 2 build directory don't exist in NUXT 3. They're in memory for speed and can be updated differently. The dotnuxt directory contains type declarations, a document template, and a Nitro server.

And a brand new NUXT project is going to have very little in place. So it's just going to have an App.Vue file and a NUXT config, and there'll be a TS config that will do some magic for us as well. We probably don't need to make any changes to the TS config here.

The app.vue is the replacement. It doesn't exist in NUXT 2. And I'm aware that there are some people here who haven't used NUXT 2. So I'll just explain what it does. This is your entry point to your app. If you delete it, it's fine. There'll be just a basic one that exists that NUXT will use for you.

I'll just create a little repository. It's still unreadable for many of the people. It got even worse. It's extraordinary. That's very, very blurry. Maybe if you deactivated your camera as well, maybe the upstream doesn't really handle it? Yeah, Daniel, I'll tweet you a screenshot so you can see. You could make sure your BitTorrent downloads are paused. Is anyone seeing this properly? Or is absolutely everyone finding this as blurry? Very, very blurry. Okay, let's jump into a quick troubleshooting thing. I don't know if disabling all our cameras can help. But that would be only true I think if the problem is actually the—how about, let's try this. Let's ignore my camera. And let's just literally share my screen and see if that'll make a difference. Might help a bit. Okay, you'll now see. Ooh, now we're talking. Now that was great, yes. Now it's very sharp. Now we're talking, yeah. Super. Okay, that'll work for us. You can zoom out a bit if you want.

Okay. There we go. Age problem. So, okay. And we'll just— Nor OBS. Okay, so here we are. First thing Daniel, to interrupt you, I'm very sorry. Can I ask you if we are supposed to follow along with the code? You don't have to follow along with the code at all. So what we're going to do is I'm just about to create a Git repository, and I'll push it up to GitHub so you can actually see what we do as we do it. If that is useful for you. Yes, that would be great. Exactly. Okay, so we're going to call this Nitro Workshop. Sorry, I have a small suggestion. Can you just for the first time check the structure of this project? Can I do what? Yeah, great. Okay, so you should be able to see that. So you've got a little, little repo here. The structure is really very simple. This is what you would get if you were to run Nuxty in it and pop it to a directory. So if you find your app.vue, which is your entry point to your Nuxt app, we'll just fire up the dev server. So that's going to be just localhost 3000. And we will go there. So you'll see there's this welcome component. By the way, if you ever are playing around with Nuxt you'll find that this doesn't work in production, deliberately. We don't want it to accidentally end up in your production bundle. So if you are wanting to deploy a little app and test it out, please change the Nuxt welcome component and replace it with something else or you will think things aren't working. So if we do that, we'll say this is my app. You'll see that we are immediately updated. So that's what we are working with today. There are some other magic directories that exist. So RTS config, I love TypeSupport so I'm not going to tell you how everything works. We extend a generated type, RTS config that exists within this dotnuxt directory. Most things, by the way, that you would have seen in NUXT 2 build directory just don't exist in NUXT 3. They're all in memory, which means they can be super fast. And it means they can be updated in different ways, as well. So the only things we've got in here are some type declarations, a document template, which really is not going to change. That's just going to be a basic structure of your HTML, a Nitro server. This is going to get recompiled whenever we change anything on the server side.

Watch more workshops on topic

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
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
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
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.
Building Pinia From Scratch
Vue.js Live 2024Vue.js Live 2024
70 min
Building Pinia From Scratch
Workshop
Eduardo San Martin Morote
Eduardo San Martin Morote
Let's dive into how Pinia works under the hood by building our own `defineStore()`. During this workshop we will cover some advanced Vue concepts like dependency Injection and effect scopes. It will give you a better understanding of Vue.js Composition API and Pinia. Requirements: experience building applications with Vue and its Composition API.

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.