his VueMastery.com workshop will teach you the fundamentals of Vue.js 3 so you can start being productive and building apps immediately. With visual animations and analogies that make abstract concepts concrete, along with coding challenges that help you learn by putting your new skills into practice, you'll build two apps throughout the day. We’ll start off by covering the core common syntax as we build our first app, then move on to building a more production-level app from the ground up.

Topics include:

The Vue instance
Attribute binding
Conditional rendering
List rendering
Event handling
Class & style binding
Computed properties
Components
Props
Communicating events
Forms
Vue CLI
Single file components
Vue Router Essentials
Dynamic Routing
APIs with Axios
Deploying your Vue app

It's been nearly a year since Vue 3 has been released, and a lot has happened since! Whether you've been waiting to get started or want to learn more about how to make the most of Vue 3, this workshop is designed to give you hands-on experience with new features in Vue 3 like Composition API, the new script setup block, built-in TypeScript support, and much more.

To attend this workshop, it's recommended to have basic knowledge of HTML, CSS, and JavaScript. Prior experience with Vue is a plus, but not required.

In the Stress-free Testing workshop, you'll learn how to test both simple and complex components. Optional Typescript track with the Composition API.

Hands-on Activities:

Use TDD to build new components (Modals, Accordions, and Lists)
Test components that use transitions, scoped slots, and async network requests
Test basic components that use slots, props, and events
Learn patterns for working with Vuex, Pinia, Vue Router, and VueI18n
Leverage spies, mocks and stubs to make assertions about your components behavior
Setup Code Coverage and Accessibility Tests

Testing Fundamentals:

The Anatomy of a Test Runner - Terms and Definitions.
The Testing Pyramid - Understanding End-to-end Testing, component testing, and unit testing.
The Critical Path - Thinking like a user about tests and code quality.
The Best Practices - Testing best practices and how to avoid common mistakes.

At the end of this workshop, you should have the functional knowledge on how to tackle and test complex Vue components as well as understand how to craft a reliable component test and determine what's worth testing.

Have fun and learn Nuxt.js at the same time. An interactive hands-on workshop where you get to create a Nuxt.js application from scratch using Nuxt Content as a headless CMS to create a blog as well as add plugins and modules to enhance your application. We will also explore getting data from an API and how to use the Nuxt live preview so you can preview changes before generating for when working with static sites. By the end of the course, you should have a fully working Nuxt.js application that we can then deploy so you can show it to the world.

What we will cover:
Creating a Nuxt.js project
Project Structure
Routing
Nuxt content, markdown, YAML, components in Markdown
Nuxt plugins and modules, perhaps we will even create our own
Fetching data from an API
Live Preview mode
Deploying your Nuxt.js Application
Extras we might cover:
Nuxt targets and rendering modes
Nuxt Context
SEO
Loading and creating a custom loader
Middleware
SPA fallback
Creating an API

Who is this aimed at?
Anyone who has Nuxt.js experience and would like to learn some more or anyone who has no Nuxt experience but has come from the Vue world or another framework or even the backend world and would like to try something different. Anyone who wants to have fun and learn at the same time. There will be lots of interactivity, creativity, communication, collaboration, teamwork, and coding.

What to expect?
We will be using Zoom and taking advantage of its breakout rooms so we can work as a team. We will try to use vs code live share so we can work together in small teams as well as other online interactive platforms so we can share ideas, discuss, vote, present and have some fun. This is an 8-hour workshop but we will have plenty of breaks so you can get a coffee, say hi to the kids, feed the dog, or water the plants.

What you should have:
A computer with an internet connection.
A camera (I love seeing people )
A microphone (built into computer, headset, or external)
VS Code with live share extension already installed
Extra cool if you have this:
Github account
Netlify account
Have already read some of the guides section of the Nuxt docs

In Vue.js, it is quite simple to work with components, and share data among them using events and props - especially in small to medium projects. When an application starts growing, managing components' state might become tedious and overwhelming. This is where Pinia comes to our rescue.

Pinia is a state management pattern + library for Vue.js applications. It serves as a central store for data needed across multiple components. It's also the newly recommended state management solution by the official Vue docs likely due to its intuitive API, Typesafety, and out-of-the-box devtools support.

By the end of the workshop, attendees will be able to develop elegant, debuggable, maintainable, and organized applications using a centralized store. No prior experience with Pinia is needed.

We will answer the common question, “When should I use Pinia?” and work on real-world features.
What is state management?
What is Pinia and what problems does it solve?
Core concepts including state, actions, and getters
Implementing state persistence to local storage by combining composables with Pinia
Subscribing to the state and to actions
Using and building reusable Pinia plugins

The workshop is divided into sections, each of which consists of one part theory and one part exercises, so come prepared to get hands-on! This is an intermediate-level workshop that requires you already understand the basics of Vue.js and assumes you have a working knowledge of the composition API.

his VueMastery.com workshop will teach you the fundamentals of Vue.js 3 so you can start being productive and building apps immediately. With visual animations and analogies that make abstract concepts concrete, along with coding challenges that help you learn by putting your new skills into practice, you'll build two apps throughout the day. We’ll start off by covering the core common syntax as we build our first app, then move on to building a more production-level app from the ground up.

Topics include:

The Vue instance
Attribute binding
Conditional rendering
List rendering
Event handling
Class & style binding
Computed properties
Components
Props
Communicating events
Forms
Vue CLI
Single file components
Vue Router Essentials
Dynamic Routing
APIs with Axios
Deploying your Vue app

It's been nearly a year since Vue 3 has been released, and a lot has happened since! Whether you've been waiting to get started or want to learn more about how to make the most of Vue 3, this workshop is designed to give you hands-on experience with new features in Vue 3 like Composition API, the new script setup block, built-in TypeScript support, and much more.

To attend this workshop, it's recommended to have basic knowledge of HTML, CSS, and JavaScript. Prior experience with Vue is a plus, but not required.

In the Stress-free Testing workshop, you'll learn how to test both simple and complex components. Optional Typescript track with the Composition API.

Hands-on Activities:

Use TDD to build new components (Modals, Accordions, and Lists)
Test components that use transitions, scoped slots, and async network requests
Test basic components that use slots, props, and events
Learn patterns for working with Vuex, Pinia, Vue Router, and VueI18n
Leverage spies, mocks and stubs to make assertions about your components behavior
Setup Code Coverage and Accessibility Tests

Testing Fundamentals:

The Anatomy of a Test Runner - Terms and Definitions.
The Testing Pyramid - Understanding End-to-end Testing, component testing, and unit testing.
The Critical Path - Thinking like a user about tests and code quality.
The Best Practices - Testing best practices and how to avoid common mistakes.

At the end of this workshop, you should have the functional knowledge on how to tackle and test complex Vue components as well as understand how to craft a reliable component test and determine what's worth testing.

Have fun and learn Nuxt.js at the same time. An interactive hands-on workshop where you get to create a Nuxt.js application from scratch using Nuxt Content as a headless CMS to create a blog as well as add plugins and modules to enhance your application. We will also explore getting data from an API and how to use the Nuxt live preview so you can preview changes before generating for when working with static sites. By the end of the course, you should have a fully working Nuxt.js application that we can then deploy so you can show it to the world.

What we will cover:
Creating a Nuxt.js project
Project Structure
Routing
Nuxt content, markdown, YAML, components in Markdown
Nuxt plugins and modules, perhaps we will even create our own
Fetching data from an API
Live Preview mode
Deploying your Nuxt.js Application
Extras we might cover:
Nuxt targets and rendering modes
Nuxt Context
SEO
Loading and creating a custom loader
Middleware
SPA fallback
Creating an API

Who is this aimed at?
Anyone who has Nuxt.js experience and would like to learn some more or anyone who has no Nuxt experience but has come from the Vue world or another framework or even the backend world and would like to try something different. Anyone who wants to have fun and learn at the same time. There will be lots of interactivity, creativity, communication, collaboration, teamwork, and coding.

What to expect?
We will be using Zoom and taking advantage of its breakout rooms so we can work as a team. We will try to use vs code live share so we can work together in small teams as well as other online interactive platforms so we can share ideas, discuss, vote, present and have some fun. This is an 8-hour workshop but we will have plenty of breaks so you can get a coffee, say hi to the kids, feed the dog, or water the plants.

What you should have:
A computer with an internet connection.
A camera (I love seeing people )
A microphone (built into computer, headset, or external)
VS Code with live share extension already installed
Extra cool if you have this:
Github account
Netlify account
Have already read some of the guides section of the Nuxt docs

In Vue.js, it is quite simple to work with components, and share data among them using events and props - especially in small to medium projects. When an application starts growing, managing components' state might become tedious and overwhelming. This is where Pinia comes to our rescue.

Pinia is a state management pattern + library for Vue.js applications. It serves as a central store for data needed across multiple components. It's also the newly recommended state management solution by the official Vue docs likely due to its intuitive API, Typesafety, and out-of-the-box devtools support.

By the end of the workshop, attendees will be able to develop elegant, debuggable, maintainable, and organized applications using a centralized store. No prior experience with Pinia is needed.

We will answer the common question, “When should I use Pinia?” and work on real-world features.
What is state management?
What is Pinia and what problems does it solve?
Core concepts including state, actions, and getters
Implementing state persistence to local storage by combining composables with Pinia
Subscribing to the state and to actions
Using and building reusable Pinia plugins

The workshop is divided into sections, each of which consists of one part theory and one part exercises, so come prepared to get hands-on! This is an intermediate-level workshop that requires you already understand the basics of Vue.js and assumes you have a working knowledge of the composition API.