JavaScript Conferences

Vue.js London Live 2021

Vue.js London Live 2021

Top Content

English versionEN

Video: Vuetify 3 Enhancements Overview

John Leider

Hi, I'm John Leader, the creator of Viewtify. Viewtify 3 is the upcoming version with new design concepts, improved usability, and compatibility with modern browsers. The framework has added new features like a validation system, style diversity, semantic customization options, and a density concept. Enhanced customization options, improved performance, and advanced browser support with CSS variables are also highlights of Viewtify 3.

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

Read FAQ and transcription

FAQ

Viewtify 3 is the next version of the Viewtify framework, set to release in February of next year. It includes numerous updates and new features aimed at improving usability, design consistency, and performance.

Viewtify 3 is scheduled for release in February of next year.

Key updates in Viewtify 3 include the completion of basic compute components, new design concepts, additional interfaces for easier interaction, improved usability, and new browser features. It also includes a new validation system and enhanced animation positioning for menus and dialogues.

Viewtify 3 includes around 42 basic components such as alerts, banners, ratings, buttons, chips, and avatars.

Viewtify 3 features a new validation system that allows for both synchronous and asynchronous validation. This system is more flexible and can be used with multiple components and elements.

The 'density' concept in Viewtify 3, borrowed from Material Design, defines how much vertical space a component occupies. It allows for more compact design options, letting users create applications with less blocky and more space-efficient layouts.

Semantic customization options in Viewtify 3 refer to normalized design aspects that are categorized for ease of use. This includes a new concept called 'variants' which homogenizes functionality across multiple components, making design choices more consistent.

The animation positioning system in Viewtify 3 has been enhanced to make menus and dialogues animate based on their activator's location. This improves the visual feel and performance, resulting in crisp, jitter-free animations.

Viewtify 3 offers improved developer experience with a new VITE plugin, faster compilation times, and better customization options using CSS variables. It also supports advanced browser features like Focus Within.

You can try the alpha version of Viewtify 3 by visiting next.Viewtifyjs.com. You can also follow the releases on the GitHub releases board or join the community on Discord at community.Viewtifyjs.com.

vue vue composition api vue 3

John Leider

20 min

21 Oct, 2021

Comments

Sign in or register to post your comment.

Available in other languages:

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 2021

34 min

Everything Beyond State Management in Stores with Pinia

Top Content

Eduardo San Martin Morote

Eduardo San Martin Morote

Vue.js Core Team

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.

vue pinia react state management

Welcome to Nuxt 3

Vue.js London Live 2021

29 min

Welcome to Nuxt 3

Top Content

Alexandre Chopin

Alexandre Chopin

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.

vue vite nuxt.js

One Year Into Vue 3

Vue.js London Live 2021

20 min

One Year Into Vue 3

Top Content

Evan You

Vue.js & Vite Creator

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 2021

8 min

Utilising Rust from Vue with WebAssembly

Top Content

Joe Lenton

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 webassembly rust

Vue: Feature Updates

Vue.js London 2023

44 min

Vue: Feature Updates

Top Content

Watch video: Vue: Feature Updates

Evan You

Vue.js & Vite Creator

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.

vue frontend vue 3

Local State and Server Cache: Finding a Balance

Vue.js London Live 2021

24 min

Local State and Server Cache: Finding a Balance

Top Content

Natalia Tepluhina

Natalia Tepluhina

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.

vue graphql server cache

Workshops on related topic

Monitoring 101 for React Developers

React 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

vue react angular testing

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

Vue.js London Live 2021

117 min

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

Top Content

WorkshopFree

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.

Vue3: Modern Frontend App Development

Vue.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

vue web development vue composition api vue 3

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

JSNation 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.

azure vue 3 nuxt.js

TresJS create 3D experiences declaratively with Vue Components

Vue.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 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.

vue vue composition api