Vue.js Live Conference

Vue.js London Live 2021

Building an online store these days is not an easy task. With so many competitors Time to Market is the key to success. That's why we decided to build an integration between Vue Storefront- Lightning-Fast Frontend Platform for Headless Commerce, and Vendure - modern, headless GraphQL-based e-commerce framework. Both tools are built using modern JavaScript stack (Nuxt.js and Nest.js) and have several out of the box integrations like search engines, CMS's, payments, and so on. Also, both projects have a huge community of Open Source contributors who support the development process. In this presentation, I will show you how fast you can create your store with VSF and Vendure. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vue Storefront + Vendure = Fullstack Open Source Ecommerce

Jakub Andrzejewski

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

One Year Into Vue 3

Evan You

Welcome to Nuxt 3

Alexandre Chopin

Most of the people in our industry know what Lighthouse or Page Speed Insights are and use them regularly. Unfortunately, most of them have no idea how they work which leads to terrible misconceptions and misunderstandings, especially for non-tech business owners. In this talk, I want to help everyone make better use of these tools explaining how they work, what's their goal, and how to interpret the data to come to the right conclusions. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Measure Performance Effectively?

Filip Rakowski

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

Everything Beyond State Management in Stores with Pinia

Eduardo San Martin Morote

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

Daniel Roe

Developers often look at abstractions as being ""the closer to the metal, the better,"" meaning that as abstractions become further removed from the lowest possible level, the more you give up in terms of performance and features. But abstractions work as a spectrum also. We'll look at how we can adjust our view of abstractions and what kind of examples we can use to better understand that abstractions have less to do with programming and more to do with where we deploy. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

A New Kind of Abstraction

Mike Hartington

Frontend frameworks like Vue are vulnerable to unsanitized inputs to execute malicious code. The patterns that allow for this are generally understood, but there are still some cases when your apps might still be at risk. Learn how you can implement automated application security to keep your apps safe. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How Developers Can Use Automated App Security Testing To Protect Vue Apps

Nick Teets

In this lightning talk, you will see: 1. The lack of visibility on Vue.js applications. 2. How to install the Sentry Vue.js SDK. 3. How you can use Sentry to identify errors and slowdowns within your Vue.js App. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Identify Issues and Prevent Slowdowns in your Vue.JS Apps

Simon Zhong

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. <h3>Transcript</h3> <h4>Intro</h4> Hello everyone. I'm Joseph Lenton. I'm a tech lead at Attest, and today I'm going to be showing you how you can use Rust from Vue with WebAssembly. So let's get started. <h4>Intro What is WebAssembly?</h4> [00:29] What is WebAssembly? WebAssembly is a new binary format available in the browser, and it's what people call a compilation target in that you would write code in, say Rust, or C, or C++. You would compile that to WebAssembly, and then you can load that WebAssembly using JavaScript and execute that WebAssembly. And this allows to have hard performance code and less memory use than if you had written it in say JavaScript. WebAssembly is available in all modern browsers.So how do we use it? I'm now going into an example in a moment, and for this example, I've used the VueJS/Cli to generate a template, but I've used the next version. I'll explain why in a moment. For the Rust side, I've installed a tool called wasm-pack. And the reason why is because obviously we don't want to be generating normal Rust binaries we want to be tied to WebAssembly, and there's a few other extras that we would need to set up. Rust, in fact, does all of that for you. <h4>DEMO</h4> [01:30] So let's hop into the code. Here I have a template that I've already generated. The reason why I use the next version is because it installs with Webpack 5. Before we get into any Rust code, I need to be able to consume WebAssembly within the project. And Webpack 5 can do that. So I'm going to be turned on the ability to do that. In the viewconfig, I'm going to be adding the module exports, which will configure Webpack, where under the experiments, you can find asyncWebAssembly. And I am going to be setting that to true. And so now I'll be able to consume WebAssembly within this project.Now let's talk about the Rust code. Well I don't have any Rust code here... so I'm going to start a new Rust project with wasm-pack new, I'm just going to put my-rust-example, and that will generate a brand new Rust project. Because I've used wasm-pack it adds in a few extras, so for example, it's added in somewhere the wasm bindgen to be able to talk to WebAssembly as well as a few other useful extras already set up. If I go into the source code that's provided, the default source code, its provided these two functions out of the box. This is an external function. And so it means external to Rust this alert, this is provided to the browser alert that's available. And so that's that external function. And so it's trawling the browser alert already in its default code from Rust. Here is a greet function that it's provided. Let's add on a custom message to this. And instead of calling with this, let's pass the custom message to the browser alert from Rust.[03:30] So I'm happy with that. Let's build it. So I'm going to go into my-rust-example and then I'm going to do a wasm-pack build and this will build it targeting what's called the WebAssembly tool chain. So it outputs WebAssembly code, and it also outputs a few other things which are quite useful.We have this package folder that's just shown up and this package folder is the output that that generates. And this includes what is a Node package. So it has a package, Json, just as you would normally expect. It has of course the WebAssembly code. We'll need that. It has some JavaScripts here. So I said before you would load the WebAssembly and then call it from JavaScripts or it's provided that code for me so that I don't need to do that. And it's even provided Typescript declarations so that I can call this from typescripts and get all of the correct parameters and such.[04:34] So let's add this project to my Vue templates. I'm going to turn down to the Vue package Json down here, here it is the lightning-talk and I'm in the dependencies. I'm going to add on that Rust project, my-rust-example, and it is on file system. And it's my-rust-example. And I need to point to the Node package that wasm-pack built. Let's install that. Let's do a yarn install and then let's do a yarn serve.And now we have the templates running. Let's go to a browser, let's go here and here is the templates. So I have a page that I've already started on called "click me". It has a button. The button doesn't do anything. Let's call that Rust code from here. So I'm going to go in to click me. Here is that button, it calls on the click me. Here is the on click me function. So just like I would import some in any other JavaScripts dependency, I can now import the greet function from my-rust-example. And now let's call greets. Hello from Vue via Rust. Let's put that. It's built. Let's go back here. Let's click me and hello from Vue via Rust. And so that button, this has poured into the wrapper JavaScript in this package folder, which is then called into the WebAssembly. And how cool is that? Which then called back into the alert.[06:29] So that's awesome. Of course being a Node package, we just deploy that to NPM. And so why don't we do that now? So there is wasm-pack publish. So I'm going to do that. Wasm-pack publish, and now it's on NPM. And so now instead of using on the file system, I can just put in the file number of that and then install via yarn. And so that way I can share it with other people as long as they can consume WebAssembly. Thank you very much. I hope you found this very useful. by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Utilising Rust from Vue with WebAssembly

Joe Lenton

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

Local State and Server Cache: Finding a Balance

Natalia Tepluhina

UI components are built on user flows or state graphs. To manage these states, we usually resolved to boolean variables system like isLoading. But this proves to be buggy and hard to maintain as the codebase grows. There is a better solution. In my talk, we will explore how we can fully control our app's states and develop a more adaptive UI system to users' behavior while keeping the codebase scalable with state machines, in real time. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vuex? No, it’s X(state)Vue for UI

Maya Shavin

Forms on the web have always been with us, yet it still feels like you always have to fight them to make validation work as you planned - and even with the significant improvements modern day libraries and frameworks give us, maintenance is mostly a hassle.Vest is a new breed of form validations framework. It draws its syntax and style from Unit Testing frameworks like mocha or Jest (hence the name), which brings the elegance and declarative nature of these frameworks to the world of form validation, greatly reducing the overhead it takes to write, maintain and reuse validations in your JS apps. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vue Form Validations with Vest

Evyatar Alush

Dive deeply into the architecture of our massive Vuex store. This solution will always be easy to scale, read, and maintain no matter how huge your app is. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Structuring A Massive Vuex Store

Domagoj Vidovic

There's a lot to gain from adding animations to your site or app. Beyond their visual appeal, you can guide the user's attention, cover up slow to load components and elements, and reveal sections of a page without the user wondering where it came from. This talk will cover the built-in ways Vue.js helps you animate your site, and how for more complicated animations you can hook into third party libraries. It'll also cover the basics of animation itself – what to animate, what not to animate – and how you can use animations to enhance your website without harming the experience of people with disabilities. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Animation and Vue.js

Callum Macrae

Brief intro to the new features of Vue 3 and Vite, then focus on how those features / mindset affect the way we think of tooling and DX. Which leads to my Vitesse project and several unplugins that enhance the Vue developer experience even further (will do some short demos in between). Finally, introduce the ways to use those new features in the existing Vue 2 apps today and make the migrations easier. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

New Ways to Vue

Anthony Fu

Vue.js is a frontend framework. But the different modules, such as the reactivity engine can be imported on its own. Let's have some fun and explore possible use cases for Vue reactivity in the backend. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Taking Vue.js to the Backend

Marc Backes

This talk will cover best practices for performance, stability, security, and maintainability of CI/CD pipelines, each supported with practical examples and counterexamples and tailored towards Vue.js developers. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

CI/CD Success for Vue Developers

Zan Markan

Migrating to Vue 3 can be an important task (depending on your project's size). At Crisp, we recently migrated our app (250K lines of code) from Vue 2.6 to Vue 3.2 in about 2 weeks.In this talk, we will share our learnings so you can benefit from our experience.  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Seamlessly Migrate a Large Codebase to Vue 3

Baptiste Jamin

What is the best way to structure a Vue.js application so that it can scale to meet all your users' needs ? There are multiple patterns established the Vue community and the programming community at large that can be adopted in order to make your codebases more predictable, maintainable, and extendable. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Patterns for Large Scale Vue.js Applications

Daniel Kelly

The Vue 3 Reactivity and Composition API offers developers flexible techniques to work with reactive data. They enable a new and modern approach to handling State Management. Developers can now effortlessly implement local and global stores. Vuex has been one of the most used First-party plugins for Vue 2. Let's have a look at the advantages and tradeoffs of using Composables instead of Vuex. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Modern State Management with Vue 3

Vanessa Otto

Options API vs Composition API: Choosing the Right Approach for Your Team

Ben Hong

On Stackoverflow, people usually do have the exact same struggles daily. Let me quickly review most of them and give you some solutions on how to solve them. On top of giving you tips on how to solve your bugs faster! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Understand the hard parts of Nuxt

Konstantin BIFERT

The web is an ever-changing platform and so are the websites we create. With new technologies and possibilities come new challenges for both developers and SEOs. In this session, we will talk about how developers and SEOs can become a team and solve challenges together. We will look into a few scenarios where this collaboration can bring success to a project. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Technical SEO & JavaScript

Martin Splitt

Forms can be hard in frontend. Whether your forms are simple or complex, they share common pain points like value tracking, user interactions, validation, and submission. We will look at how vee-validate helps you address those issues, and how to apply progressive enhancements to your forms and input components. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Progressive Form Validation in Vue.js

Abdelrahman Awad

Migrating your Vue 2 app over to Vue 3 doesn't have to be painful. This talk walks you through the process. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Migrating to Vue 3

Adam Jahr

In this session, I'll go over these patterns (Sharding, ISR, DPR, DSG) and show our viewers and 2million+ other Jamstack developers how to leverage them to build large sites without the overhead on lengthy build times. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Advanced Site Rendering Patterns on the Jamstack

Ekene Eze

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

Learn about the newest features coming to the next version of the framework. See how the core team approached porting Vuetify from Vue 2 to the Vue 3 composition api. Preview updates to core features such as the new layout system, improved testing methodologies, expanded customization options, updates to css utility classes, and much much more. <h3>Transcript</h3> <h4>Intro</h4> Hi, my name is John Leider. I'm the creator and author of Vuetify. And today I wanted to take a little bit of time to talk about Vuetify 3, the next version that will be releasing February of next year. And some of the different items and aspects the team has been working on as we've been moving through Alpha. <h4>Vuetify 3 Updates</h4> [00:42] Some of the biggest updates that we have are in the form of the baseline creation of all of the basic components for the framework. We have lots of new design concepts normalized in their terminology, so that they're more semantic and easier to work with. We have additional interfaces that allow you to interact with the components in more intuitive ways that allow you to have more consistent results. And we've also been working a lot on the actual usability of the various parts of the framework. From making it easier to manipulate and work with custom styling, as well as how that gets implemented into your project. And some of the new browser features that we get to take advantage of, as we move away from the Internet Explorer 11 platform. <h4>Component Updates</h4> Basic Components[01:52] So some of the changes and improvements that we have coming from components. Stated at the beginning, the basic components for the framework are all complete. These are components that form the foundation for larger implementations. Things like alerts and banners, ratings, as well as around 42 other basic components. From buttons to chips and avatars, that we use to create and build some of the more complex composition components.We've added a lot of new interfaces for how you can work with these different components, things that simplify the way that you are able to interact and make different design choices and changes within those components. We've also added some additional utility classes to help you, in addition to modifying components based upon their normal prop structures, but also being able to make additional changes through the help of utility classes for texts and color and different transforms and whatnot. Forms Elements &amp; Validation[03:20] Now one of the things that we've recently got in the framework that the team has been working on is the form elements in our validation systems. We have a new validation system that is now expanded as an available inline provider, as we call them. That allows you to not only implement any type of component or element as a validatable item to an extent, but we've also added new functionality for how you can perform validation, including asynchronous calls. In addition to the already existing Version 2 functionality that's available today.This validation system is built-in to the new form components, in addition to being available in line, as displayed here on the right. Where we can now take something that was previously hard coded into inputs, and now is something that is flexible and can be used in multiple places. We've also worked a lot on improving the style diversity of input components with a new concept that is in material design called Density. And I'll talk a little bit more about that later. And in addition to a lot of these new features and functionalities, we still have ported over all of the existing Version 2 styling in addition to the new available options for Density, that we've created. Improved Animations[05:20] One of the cool things that we've recently implemented was an animation positioning system for how our menus and our dialogues are what we typically call detachable components. How those operate. And one of the new things that we have that is applied to the way that menus and dialogues animate whenever their activator is clicked, is a transform that is based upon the activator's location.So as you can see in the animation here, whenever we open up the dialogue, as opposed to it being an element that just animates from the center of the screen, we're actually now transforming these detachable elements from their original activator location. To really improve the visual feel of the actual functionality, but also to improve the performance and how smooth it is whenever you're working with these components. So that there is crisp animation, there's no jitteriness. And this is one of my more favorite parts of the new version with all of the way that menus as well work, and how they position on the screen. We have a lot more functionality that allows the user to make some really nice aesthetic designs and decisions within their application, and just giving the user more options overall. <h4>Normalized Concepts</h4> [07:07] We have some normalized concepts, that I like to call semantic customization options, that we've begin to normalize or pull together multiple different design aspects within Vuetify, and tried to put them under a particular category or similar options between multiple components. So that when you're working across the framework, you'll have different components that you're working with, but they'll still be based upon the same kind of interface that you're working with, with multiple different components. New Style TerminologyAnd what I mean by that is, we have a new concept called Variants. And what this is, it's a way for us to take some of our mutually designed exclusive properties and functionality within Version 2 and put it behind a naming convention, so that we can reuse this throughout. And actually expand the functionality that is available, for multiple different components.[08:21] An example being the file available that exist primarily in card-based components are contained, contained text, text, outline or plain. And these different design styles are represented in Version 2, but they're not represented behind any specific naming convention. So what we've done is to homogenize this functionality. We've made it so that it is reusable throughout any card, S component, alerts, sheets, banners, list items. That gives you some additional control over not only the visual aspect of the component, but I stated before homogenizing, making this similar throughout multiple different implementations so that we can have similar and same functionality for multiple components that didn't even have the ability to implement these styles in Version 2. Density &amp; Size[09:31] One of the other things that we have implemented conceptually is the density from material design. And what density is a declaration of how high or vertically how much a component takes up space-wise. Whereas size is, it modifies components' padding, modifies font size, and in general takes up potentially a larger space on X axis. Whereas density, we're just reducing the height.So what we've done here is, we've added the ability to combine multiple different aspects of sizing that's available in the framework Version 2 for right now. We have regular sizing for extra small, small, default, large, extra large. With the introduction of density for Version 3, we've taken some components that you may have worked with that had a dense property. That's now been split into two, which are now compact and comfortable. And these are essentially iterations of certain pixels for pixels, to be exact, that reduce in scales. So that a button or an input will maintain the same visual look.[11:02] However, it will take up physically less vertical space. And then for components that support both size and density, these actually work together. So you can do things such as having an extra-large compact button, if you so choose. And what this does is, it gives a lot more options for the user to be able to build their application so that you don't have to have such blocky design or something that takes up a lot of space on the page. You have the ability now where you can globally change in the framework, all components support density to a more compact style. And these are some of the interesting ways that you can interact with these components, like button and inputs, list item. Improved Interfaces[11:59] We've worked a lot on the interfaces for working with components, to give users the ability to solve their problems in different ways. So right now, in Version 2, most of the components that have what I'd like to call textual interface properties, things, as you can see on the slide for properties defining, title, subtitle, text. This exists on some components, but it was never synced in a way that was similar across the framework.So now you're going to have the ability to customize components in three ways in most situations. We'll have the default approach, which are elements. This is pretty much what Vuetify 2 is now. In some cases, very verbose to get to a specific styling, which is required by the structure. For example, if you want to have the card text styling in a card, you have to have a V-card text component. So what we've done is we've kept that as a baseline, but then we went ahead and said, "Okay, we're going to add some props." We're going to say, you can specify any one of these particular textual interface properties, title, text, subtitle, the ability to set avatars or icons. Commonly used and requested features that usually the user has to manually apply themselves, instead giving a baseline that is not super-flexible in some ways, but is flexible in others. So if you want to just apply some text to a card with a title, you can do that with a prop. Or you can do it with a slot, where it gives you the same markup that you would write normally by default with elements. But also you can make additional changes inside of it.[14:06] So just giving you some flexibility for how you can approach your problems, and you can actually mix and match these together and come up with a unique design implementation of your own. Usability Improvements[14:23] So we have some usability improvements, quality of life changes things that improved not only either the developer experience, but how we interact, how we and other users interact with the framework as a whole, from that perspective.Version 2, we still use SASS, but we used the import approach towards implementation. We've converted our SASS 4 Vuetify into what are called modules. This is to coincide with new updates to the Vuetify loader and our new vite-plugin, which is available now. And what the purpose of this was is to create a more easy-to-use interface for SASS, but to also resolve issues that we were having with prepend data and polluting the global variables within SASS. It's also given us the ability to do some pretty cool things, like with the new vite-plugin, you can expose the ability to modify any and all styles. Just as you would with Version 2, but anything that's not modified in such actually has a pre-compiled CSS file, specifically for either that component or functionality. That will be used instead of recompiling, which gives drastically faster compilation times. And not only is it considerably faster to work with a Vuetify implementation where you are customizing the variables, and you're customizing SASS that's compiled during dev time.[16:25] Now, not only is that faster, because for components that aren't being used for variables, we already have that pre-compiled, but also we're hooking into vite. Which has been a lot of the team's focus as of late, for the development process.We've been able to take advantage of some Evergreen features from browsers, such as Focus Within and CSS variables. Working with a button, for example, now provides different visual cues based upon how your interaction occurs with that element. So if you're clicking on a button, chances are you're aware of the location of that button, and we don't need it to provide an outline whenever we click on it. However, if you are tapping through your application, it's not as obvious whenever a button slightly dims and its opacity.[17:35] So now we have some new functionality with the advanced browser support, to be able to have a distinct visual display based upon how an element is interacted with.In regards to the CSS variables, these existed in Version 2, they're now first-class citizens of Version 3. They're used heavily throughout the framework, and are now the baseline for allowing our customization options within the framework to expand that out. And make it not only easier to modify, but giving you more options to change during those modifications.[18:25] And so right now, the team is heavily working on the Alpha. We have been making really great progress. And as of right now, we are set to deliver Vuetify 3 in February of next year. We really are excited about a lot of the new features that are coming to the framework. And we're really excited for you to get to check it out and take a look. You can check out the Alpha right now. If you go to next.vuetifyjs.com, and you can also follow our releases on the GitHub releases board. Or even communicate and reach out to the dev team on Discord at community.vuetifyjs.com. My name is John Leider, and this has been an update on Vuetify 3. Thank you. by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vuetify 3: Titan

John Leider

With Chakra UI, we are able to override component styles to express custom design systems with accessible Vue components. This talk explores the new theme API in v1 and how you can use it to quickly build custom UIs for your application. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Code at the Speed of Design in Chakra UI Vue

Jonathan Bakebwa

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

Panel discussion: State Management

Kia King Ishii

When building an app, there are many options choices developers need to make. Is it a web app? Does need to be a native app? What should I use for UI? In this workshop will look at how to make use of Ionic for building your app and how to deploy it to not only the web, but native as well. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building for Web and Native with Ionic & Vue

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

Building full-stack GraphQL applications with Hasura and Vue 3

Gavin Ray

Solving your front-end performance problems can be hard, but identifying where you have performance problems in the first place can be even harder. In this workshop, Abhijeet Prasad, software engineer at Sentry.io, dives deep into UX research, browser performance APIs, and developer tools to help show you the reasons why your Vue applications may be slow. He'll help answer questions like, "What does it mean to have a fast website?" and "How do I know if my performance problem is really a problem?". By walking through different example apps, you'll be able to learn how to use and leverage core web vitals, navigation-timing APIs, and distributed tracing to better understand your performance problems. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

A Different Vue into Web Performance

Abhijeet Prasad

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

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

Vue3: Modern Frontend App Development

Mikhail Kuznetcov

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

Code / Create / Communicate