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.

This workshop has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

Nuxt 3 is a complete rewrite of Nuxt 2, built on Vue 3 and using the Composition API, TypeScript, and Nitro. It offers a smaller build size, faster performance, and updated features like hybrid rendering, where different render methods can be used side-by-side depending on the page's needs.

To deploy a static web app using Azure Static Web Apps, you need to set up the app in Azure, connect it to a GitHub repository, configure build and deployment settings, and push your code. Azure will automatically handle the deployment and provide a live URL for the app.

Azure Functions are serverless computing services that allow you to run event-triggered code without having to explicitly provision or manage infrastructure. They are ideal for tasks like APIs, data processing, and automation, scaling automatically based on demand.

To test Azure Functions locally, you can use the Azure Functions Core Tools. After installing the tools, you can start the function locally by navigating to the function's directory and running the command 'func start'. This will provide a local URL to access the function.

The SWA (Static Web Apps) CLI is a tool for emulating Azure Static Web Apps locally, allowing developers to test both their static front-end and API (Azure Functions) together. Use the SWA CLI command 'swa start' specifying paths to your static content and API to start a local development server.

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.

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 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
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
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.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
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.
Making Magic: Building a TypeScript-First Framework
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
Top Content
Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.
Stop Writing Your Routes
Vue.js London 2023Vue.js London 2023
30 min
Stop Writing Your Routes
Designing APIs is a challenge, and it's important to consider the language used and different versions of the API. API ergonomics focus on ease of use and trade-offs. Routing is a misunderstood aspect of API design, and file-based routing can simplify it. Unplugging View Router provides typed routes and eliminates the need to pass routes when creating the router. Data loading and handling can be improved with data loaders and predictable routes. Handling protected routes and index and ID files are also discussed.
Nuxt on the Edge
Vue.js London 2023Vue.js London 2023
30 min
Nuxt on the Edge
Nuxt is a web framework with many features including server-side rendering, client-side rendering, static site generation, edge site rendering, and more. The Edge is a limited environment running on CDN nodes, such as Cloudflare network. Database options on the Edge include Postgre with Neon, Versel on Neon, Superbase, MySQL with plan scale, HyperDB, and KV with redis and Cloudflare storage. The speaker demonstrates creating a demo with a votes table, handling API requests, adding authentication, saving votes, and displaying results. The roadmap to a full stack Nuxt 3 with an edge-first experience is in progress. Copilot is a helpful tool for developers. Integrating SSO with GitHub and improving the developer experience are important considerations for Nuxt 3.