Going on an adventure with Nuxt 3, Motion UI and Azure

Rate this content
Bookmark

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.

Melanie de Leeuw
Melanie de Leeuw
141 min
04 Jul, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Workshop covered topics such as Nuxt3, Azure Static Web Apps, and Azure Functions. The participants created an insect encyclopedia-like application called Bucklopedia and deployed it to Azure. They also added styling, navigation, and functionality to the application. The workshop highlighted the ease of setting up a full-fledged API with Azure Functions and concluded with a successful deployment of the website.

Available in Español

1. Introduction and Team

Short description:

I'm going to start off with an introduction on who I am, what we're going to be doing here, and what we're going to be creating. I'll be talking about Nuxtree, Azure State Web Apps, and Azure Functions. We'll also cover a small piece of what we've built and share some thoughts after creating it. Juul and Samachi will be assisting me by monitoring the chats and Discord for any questions or clarifications. They are part of my crew today.

I'm going to start off with an introduction on who I am, you know, what we're going to be doing here and what we're going to be creating. I'm going to be talking about Nuxtree, Azure State Web Apps and Azure Functions. I've already said it I think four times now and it's only been like five minutes, but it will only get worse, trust me. And we're going to do like an introduction, just a small piece of what we've built, some thoughts that we have after creating this, stuff like that. One of the important things also in this workshop right now are also Juul and Samachi, and they will be my people looking at the chats and looking on Discord to see if any questions pop up, if there are unclarities or maybe errors in your part or just stuff that you want to say, and they'll be mostly answering it or pass it on to me, just so you know, that if they answer, they're not nosy developers who just want to do that thing. No, they're part of my crew today. So that's actually really wonderful.

2. Introduction and Hobbies

Short description:

I am Mel, a software engineer at Capgemini, the Netherlands. My current stack includes Vue, LitElements, Azure, and Node. In my free time, I enjoy sailing on my boat called Bola and filming small life underwater. It's a calming experience to see worlds I've never seen before.

Okay. Oh, that was a spoiler. Who am I? Look at these two pictures. This sort of sums up who I am during the summer, obviously, because this is not winter me. So on socials and blogs, you can find me at Ready Player Melly, because Ready Player One, even though it's a very awful book, it's actually one of my favorite books ever. But don't judge me on it, please. Everyone can have it. How do you say it? Bad stuff about them. But I love the book, so I'm really excited. I am Mel and me too. I live in Lima, which is right next to Amsterdam, the Netherlands, with my boyfriend and my two guinea pigs. I currently work as a software engineer at Capgemini, the Netherlands situated in Utrecht. And I've been there for like almost four years now. I really, really like it, of course, otherwise I would have not been there anymore. And my current stack, well, the current stack, the stack I've been working on for the past few years already is Vue, LitElements for Web Components, Azure and Node. So if you hear all these technologies then you might not find it surprising that This is the workshop stack that I've chosen. So in my free time, because I do have a bit of that, I am a sailor of Dutch waters. And my boyfriend found that very funny that I dare to say that out loud, but we have a boat. So I'm just going to go own that title. We are really close to well, a huge chunk of water that then illness has to offer. We have a 24 feet or seven and a half meters sailing boat called Bola. And Bola means for my non Dutchies out there a slightly larger person like Chubby. Chubby would be a very nice translation of that. Yes. Because she's just, well formed. That's how they say it in a boat. I hope. She already got the name. She already had the name when we got her last year. So we weren't responsible for that. But for the past few months, we've been just giving her a very elaborate makeover. And as you can see in one of the pictures as well, we are watered. She did everything here underneath. And now she's back in the water again. And this summer we're going to be exploring the IJsselmeer and maybe a bit of the Wadizé and all the cute towns that the Netherlands has to offer. So apart from my sailing life, which is expanding, I like to film small life. I was really struggling with how I would describe that. But just small life under and above water level. I find it very calming to see worlds I've never seen before, however small. So sometimes I just throw my camera into a pond and see what lives there. I have this tiny sort of, not really GoPro but very nice, almost GoPro. And I just throw it in the water on a stick and then it films stuff. And it usually films these tiny, creepy crawlies that you wouldn't normally see. That's what I do to relax. I can really, you know... You should definitely try it.

Watch more workshops on 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
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.
Azure Static Web Apps (SWA) with Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
Juarez Barbosa Junior
Juarez Barbosa Junior
Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.
Building full-stack GraphQL applications with Hasura and Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Building full-stack GraphQL applications with Hasura and Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
Workshop
Alex Korzhikov
Andrew Reddikh
2 authors
The workshop gives a practical perspective of key principles needed to develop, build, and maintain a set of microservices in the Node.js stack. It covers specifics of creating isolated TypeScript services using the monorepo approach with lerna and yarn workspaces. The workshop includes an overview and a live exercise to create cloud environment with Pulumi framework and Azure services. The sessions fits the best developers who want to learn and practice build and deploy techniques using Azure stack and Pulumi for Node.js.

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

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!
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.
Stop Writing Your Routes
Vue.js London 2023Vue.js London 2023
30 min
Stop Writing Your Routes
The more you keep working on an application, the more complicated its routing becomes, and the easier it is to make a mistake. ""Was the route named users or was it user?"", ""Did it have an id param or was it userId?"". If only TypeScript could tell you what are the possible names and params. If only you didn't have to write a single route anymore and let a plugin do it for you. In this talk we will go through what it took to bring automatically typed routes for Vue Router.
Making Magic: Building a TypeScript-First Framework
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.
Nuxt on the Edge
Vue.js London 2023Vue.js London 2023
30 min
Nuxt on the Edge
Learn how to build a Vue application deployed to the edge to bring a blazing fast experience to your end users.