Vue.js Live Conference

Vue.js Live 2024

Nuxt is a framework for building web apps using Vue and Nitro, driven by a vibrant open source community. Nuxt 4 aims to make the framework more usable and extensible, while focusing on collaboration rather than competition. The modules ecosystem and pluggable architecture enhance Nuxt's functionality and customization options. Nuxt prioritizes user choice and aims for stability and reliability. Nuxt 4 introduces thoughtful breaking changes and is eagerly anticipated by the community.

We'll explore what's new in Nuxt 4, and the architectural decisions we've made to make it 'a better hammer', no matter what kind of project you're facing. I'm aiming for something useful for anyone, even if they don't use Nuxt. So thinking about framework philosophy, and inspiring people with what's under the hood.

Building a Better Hammer - The Story of Nuxt 4

Daniel Roe

TS Congress

TypeScript Congress 2023

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.

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.

Making Magic: Building a TypeScript-First Framework

Vue.js London Live 2021

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.

Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.

Welcome to Nuxt 3

Alexandre Chopin

A single-page application utilized a server-side BFF layer to simplify authentication and data customization. Testing a BFF-based architecture involves contract testing and tool usage. Challenges arise when mocking server-to-server requests in a client-side and server-side architecture. Separate tests should be written for client-side and server-side components, with contract testing to ensure compatibility. Integration testing for the front-end and server-side can be done by replacing microservices with a sub-server.

Let's explore how to create more resilient software systems employing API-first techniques. By utilizing the contract testing tool Specmatic and the Playwright test runner, we can develop tests that ensure our Nuxt applications work perfectly and communicate correctly with Microservices they rely on to get data. We will take a closer look at how to write OpenAPI specifications that aid us in documenting our APIs and enable us to ensure they work correctly. Furthermore, we can use those specifications to automatically spin up a stub server, which we can use to test our application in a controlled environment with Playwright. The techniques I'll show you will help you write tests that enable you to rapidly iterate without fearing regressions. Learning Outcomes: 1. You know about the basic principles of Contract Testing and how it also helps drive our E2E tests. 2. You know to opt for Contract Testing when working with Microservices and BFFs, database seeding when using Nuxt with a database, and mocking when dealing with SPAs. 3. You know the steps to create your first OpenAPI specification and integrate Specmatic with Playwright or Cypress, and you are keen to apply this technique to your projects.

No More Mocking! Write Better Tests For Your Nuxt Application With Contract Tests

Markus Oberlehner

Vue.js London 2023

Image optimization is crucial for website performance and user experience. Services like IPX and Cloudinary can help optimize images on the fly. Cloudinary offers additional functionalities and transformations for image management. Lazy loading and the lazy pattern can improve website performance by deferring image loading. Optimized images deliver a better user experience. Fallbacks can mitigate the impact of service failures.

Improving Performance of Vue or Nuxt apps is not an easy task. However, there are some quick wins that you can implement easily that will drastically improve the performance of your website. One of such quick win is Image Optimization. In this talk, I will teach you how to optimize images on the fly with Digital Asset Managements services like Cloudinary or Content Management Systems, utilize the concept of Lazy Loading, use compressed format of images like WEBP, and many more!

Image Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps

Jakub Andrzejewski

Nuxt.js modules are a central part of Nuxt and have had 14 million downloads. Creating Nuxt modules is easy with Nuxt 3. Modules can provide assets, CSS injection, plugins, and auto imports. Learning Nuxt modules gives a deeper understanding of Nuxt and extends its functionalities. The Nuxt community is friendly to newcomers and encourages module creation.

Nuxt modules are the de-facto way of extending our Nuxt applications with new behaviors and functionalities. Have you ever built your own? Why would you bother with hundreds of modules already out there? Let's answer those questions together and see why making your own modules in Nuxt 3 can both help you have a deeper understanding of how Nuxt works while also paving the way for you to get into open source!

Nuxt 3 Modules and Open-Source

Lucie Haberer

JS Nation

JSNation 2022

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.

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.

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

Melanie de Leeuw

TypeScript Congress 2022

TypeScript for library authors offers benefits for both internal and external use, improving code quality and providing accurate understanding of libraries. Documentation and examples should be in code to provide up-to-date information. Testing types alongside unit tests ensures accurate typing. Managing changes and exposing types requires careful versioning. Deep integration of types improves usability. Using a map in TypeScript allows for simpler implementation and customization. Leveraging types in libraries can generate code based on user access. TypeScript integration with Nuxt provides support and type declarations.

Using real-life open-source examples, we'll explore the power of TypeScript to improve your users' experience. We'll cover best practices for library authors, as well as tips and tricks for how to take a library to the next level. This talk will cover:  - how to leverage the type inference to provide help to your users; - using types to reduce the need and complexity of your documentation - for example, using function overloads, string literal types, and helper (no-op) functions; - setting up testing to ensure your library works (and your types do too!) with tools like tsd and expect-type; - treating types as an API and reducing breaking changes whilst shipping enhancements; - I'd draw on my experience with libraries like nuxt3, sanity-typed-queries and typed-vuex and show what we managed to do and what I'd do differently in future.

TypeScript for Library Authors: Harnessing the Power of TypeScript for DX

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.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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

This Talk provides an introduction to SEO and its importance, covering on-page and off-page SEO. It explains how to optimize a website for search engines by creating a sitemap, using meta tags, and implementing structured data. The Talk also discusses the benefits of using RSS feeds for automated newsletters and social media posts. Additionally, it emphasizes the importance of continuous optimization for SEO, including adding useful content, organizing headings, optimizing UX, and staying updated with Core Web Vitals.

Whether you're creating niche content or building a website for a client you must have your Nuxt project ready to support any SEO technique. Alba will present us the resources that can help your website to grow in search engines and how to implement them in Nuxt. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Let SEO be with You in Your Nuxt App

Alba Silvente Fuentes

Vue School offers free training material, workshops, and consulting services. Vite is a game-changer for Vue and web development, significantly improving the development experience. It leverages the browser's native ES modules feature and uses ESBuild. Vite's dev server is much faster than other bundlers. Vite provides a blazing fast development environment for various frameworks and supports server-side rendering and static site generation. Vite is ready for production and likely to be used by Vue CLI in the future.

In this talk you will learn what Vite is, why it is so great, and why you want to use it ASAP. You will also learn how to use Vite with Vue.js or React, and what Vitepress is and how to use it.Alex Kyriakidis, founder of Vue School, will also answer the most frequently asked questions around Vite, including production use, Vite and test runners, what it means for Nuxt, and many more. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How Vite Changes the Game for Vue and Web Developers

Alex Kyriakidis

This Talk discusses optimizing developer experience with Nuxt 3. It highlights improvements in documentation, auto importing libraries, server developer experience, and deployment. Nuxt 3 introduces a unified solution for schema, documentation, and defaults, as well as auto imports for easy component access. It also introduces a faster server framework called H3 and allows for efficient network requests with isomorphic fetch. Deployment is simplified with a single entry point and support for various platforms. The goal is to make Nuxt 3 amazing and backport features to Nuxt 2 apps.

Optimising developer experience with Nuxt 3 - a tour through the ways the new version of Nuxt will save time and make your life easier. We'll explore the new nitro-powered isomorphic fetch, dive into Nuxt 3's more powerful dynamic routing, and along the way tour a host of other features that will give you superpowers. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Optimising Developer Experience with Nuxt 3

This talk introduces using Next.js with a headless CMS called Storyblock. It covers setting up Storyblock with Next.js, understanding components and index pages, rendering components and requesting data, enhancing preview with the visual editor, creating article components and schemas, reusing components, and exploring the Storyblock and Next.js connection.

This will be fast &amp; furious! I will show you the fastest possible way to connect your Nuxt.js (Vue.js) project to the headless CMS and deploy it in seconds. You should know a thing or two about Nuxt.js, headless CMS in general or JAMstack as there will be no time to describe the concepts in detail. In the end, you will be furious how insanely good the JAMstack is! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Fast & Furious - Going headless with Nuxt.js!

Samuel Snopko

React Finland

React Finland 2021

In this brief introduction of Nuxt, we will learn Nuxt basics and how to build Git-files based content management system using Nuxt.js and its module system. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#nuxt.js