Vue
Similar topics
Content
Firebase Authentication Tutorial with Private Routes in React and Vue
Today we'll create both a React and Vue application where we use firebase authentication with router guards to allow users to sign in with a custom email address. It will have a total of 3 pages, one for signing up, another for logging, and a home page that is only accessible if the user is authenticated.
videofirebasereactvueauthenticationJustin Brooks • May 23, 2021
5 Ways to Fetch Data from an API in Vue 3 Composition API
There are many ways to extract data in Vue, so today, we'll look at 5 ways you can fetch data in your application. We will also look at the new Vue 3 suspense API which tackles this problem differently and create our own composable function to maximize reusability.
videovuefetchingcomposition-apiJustin Brooks • April 26, 2021
7 Important Vue 3 Composition and Composable Functions Explained
Today will look at the 7 most common composition functions in Vue 3. We'll also create our own composable function to maximize reusability throughout our codebase. Prior to Vue 3 developers need to create large complex javascript objects which contained all the state, methods, watchers and computed properties.
videovuecomposition-apiJustin Brooks • April 19, 2021
React explained for Vue developers in 7 mins
Using your Vue skills you can learn the basics of React in less than 7 mins. React has become even more similar to Vue and used by many large companies around the world. By the end of this video, we'll convert some Vue components into React components to explain how React works. We'll also look at why so many developers enjoy and use React.
videoreactvueexplainedJustin Brooks • April 12, 2021
Vue explained to React Developers in 6 mins
Using your React.js skills you can learn the basics of Vue in less than 6 mins. Vue has become even more similar to React but still maintains some tricks ups its sleeve. By the end of this video, we'll convert some React components into Vue components to explain how Vue works. We'll also look at why so many developers enjoy and use Vue.
videovuereactexplainedJustin Brooks • April 5, 2021
Why you should choose Vue.js in 2021
We will look at 6 reasons why you should choose Vue.js in 2021. Vue.js is a flexible technology that you can use to develop modern applications fast. Vue has seen a large growth as it becomes popular among the web development industry. This is because it offers some nice benefits when compared to other frameworks.
videovueJustin Brooks • February 15, 2021
Google Maps and Geolocation app using Vue 3 Composition API
Today we will be building a google maps and geolocation application using Vue 3 with the composition API. We'll create an application that tells the distance between the current position of the user and the location they clicked on the map. By the end of this video, you'll have an understanding of how to use google maps with the Vue 3 and how to interact with it using the composition API. We'll learn about how to get the geolocation of the user as well as rendering an interactive google map.
videovuemapsJustin Brooks • February 8, 2021
Vue 3 with Electron - Building a desktop applications with Vue and Electron
Today's video is a practical guide for building desktop apps with Vue 3 and Electron. We will be building a simple file explorer that allows users to view file sizes, navigate inside directories and apply a simple file search operation. Todo this, we will walk through the process of setting up an electron app with Vue, and look at how electron interactions with the native operating system.
videovueelectronJustin Brooks • January 25, 2021
Vue 3 for Beginners - Building a tick tac toe game with the Composition API
Learn Vue 3 composition API as a beginner. If you don't know about Vue 3's composition API, today we will be making a tic-tac-toe game to learn the basics. The Composition API in Vue 3 adds a new way to build highly reusable logic and make maintain large codebases a lot easier.
videovuegamecomposition-apiJustin Brooks • January 11, 2021
Building a Realtime Chat App with Vue 3 and Firebase in 7 minutes
Today we will be combining the power of Firebase and Vue 3 to build a real-time chat application. Most importantly we will be looking at using firebase with Vue 3 composition hooks, setting up firebase authentication with google, and reading and writing to a firebase store in realtime
videovuefirebasechatJustin Brooks • January 4, 2021
Vue 3 and Firebase - Build and deploy a CRUD Application with Vue.js and Firebase
Today we will be building a Vue 3 application, using firebase as the backend. The app will allow users to create a basic customer records management system, in which a user can perform CRUD operations.
videovuefirebasecrudJustin Brooks • December 29, 2020
Vue 3 Typescript Tutorial - Basic user login flow with Typescript and Vue 3
Learn the basics of how to use Vue and Typescript to create an authentication sign form. Today we will be creating a basic user sign-in flow with typescript and Vue 3. We won't be building a backend for this example but we will create some async function to show you how you would call a backend API in your application.
videovuetypescriptauthJustin Brooks • December 21, 2020
State managment in Vue 3 with Typescript - Vuejs Pinia Tutorial / Vuex Killler?
Today we will be looking at Pinia, which uses the new reactivity system to build an intuitive and fully typed state management system. We will be creating a shopping cart application from scratch to learn the basics of using Pinia with Vue 3 Composition API and Typescript. This application will allow users to add and remove URLs from a shopping cart store created from Pinia.
videovuepiniastate-managmentJustin Brooks • December 14, 2020
Ionic and Vue 3 Basics - Building cross platform apps
Ionic is a free and open-source component library for building apps that run on iOS, Android, Desktop, and Web. Ionic allows you to write your app once and using javascript and HTML and deploy to any platform. It also comes with many nice UI components, a command-line tool for creating apps as well as various platform integrations.
videovueionicJustin Brooks • December 8, 2020
Creating a Vuex Clone with Vue 3 Composition API
Do we still need Vuex? Vuex is an awesome state management library. It's simple and integrates well with Vue. But the new composition API in Vue 3 exposes the underlying reactivity system and introduces new ways for structuring our applications. The new reactivity system is so powerful that it can be used for centralized state management.
videovuevuexcomposition-apiJustin Brooks • November 23, 2020
Advanced Vuex with Modules, and Actions in Vue 3
Knowing how Vuex works is important but knowing when and how to store state in Vuex is equally as important. If you’re working on a large-scale Vue app, you may encounter situations where you need the same data at two completely different places in your application. This is the point at which a centralized state management tool like Vuex oftentimes makes a lot of sense.
videovuexvueadvancedJustin Brooks • November 17, 2020
Vuex Basics in Vue 3 with Composition API in 6 minutes
Today we will be creating a simple counter app from scratch to learn the basics of using Vuex 4 with Vue 3 Composition API. We'll start by taking a look at Vuex concepts like state, getters, and mutations and how to use them within the options API, then we will switch over the compositions API and implement the same functionality. We'll also create some reusable helper functions to make accessing the store in the composition API more readable.
videovuevuexcompoition-apiJustin Brooks • November 9, 2020
Vue 3 and Vuex Testing for Beginners
Testing in Vue 3 provides benefits such as easier refactoring later down the line, quicker debugging, and documentation about your application. Today, we will be creating a Vue 3 app and adding unit tests with jest. We'll do this by using the Vue Test Utils library which is a set of functions to simplify the testing of Vue.js components. It provides methods to mount and interact with Vue components in an isolated manner. We'll also take at a more advanced use case where we will create a mock Vuex store for the component.
videovuevuextestingjestJustin Brooks • October 26, 2020
15 Vue 3 Tips and Tricks
Vue has become a popular framework for web development and with the recent changes made in Vue 3, I've decided to create this video where we will be looking at 15 tips and tricks for increasing productivity, maintainability, and scalability when creating Vue apps.
videovuetipstricksJustin Brooks • October 19, 2020
Building a Web app with Vue Router, Typescript and Vue Composition API
The Vue 3 Composition API has open new possibilities for accessing the full power of the Vue Router. Today we will be looking at using Vue Router with the composition API, to create a cat facts webpage with full typescript support. By the end of this video, you will hopefully have a full understanding of how to successfully use the newly added useRoute and useRouter composition functions. We'll also look at some changes between Vue 2 and Vue 3 and some more advanced features like lazyloaded routes, dynamic segments, navigation guards, and adding a 404 error page.
videovueroutertypescriptJustin Brooks • October 12, 2020
Lazy loading components in Vue 3
Fast loading speed is essential when creating any web application. A few extra seconds could have a huge impact on the number of users visiting your site. Vue 3 has introduced several new features to help you achieve this easily through the improvements to the async component API and the new Suspense component. In this video, we will be taking a look at using lazying loading components in Vue 3 to speed up your pages load times.
videovueperformanceJustin Brooks • October 5, 2020
Creating a Vuex Todo App with full Typescript Support using Vue 3 Composition API in 5 minutes
Do you still need Vuex in Vue 3? In this video, we will be looking at the changes made to Vuex 4 and then using these concepts to create a todo using Vue 3's composition API with typescript support. The major goal of version 4 is to support the new Composition API introduced in Vue 3 and to simplify the usage of Vuex overall. It is also intended to support a more robust inference for TypeScript. I do feel the new way of typescript support in Vuex is improved but it is verbose and still needs more improvement. We will explore this in detail with a todo app example
videovuevuextypescriptJustin Brooks • October 5, 2020
Building Traversy Media Hangman game in Vue 3 using the Composition API
In this video, we will be converting a hangman project created by Brad Tranvely into a Vue 3 project using the composition API. This project comes from his course called 20 web projects with vanilla javascript and he has also posted a video about converting this project into a modern react app.
videovuehangmancomposition-apiJustin Brooks • September 18, 2020
Dependency Injection in Vue 3 with Provide and Inject
In this video, we will be taking a look at avoiding prop drilling by using the provide and inject functions from the Vue 3 Composition API. This is more of an advanced topic so this video assumes you have a basic understanding of the Composition API functions and the fundamentals of reactivity in Vue 3.
videovueprovideinjectJustin Brooks • September 13, 2020
Using Teleport in Vue 3
In this video, we'll be talking about the new Vue 3 Teleport API. We will take a look at a few examples of using the teleport features to understand how it can help in your application. In the example, we'll be taking text from a component and teleporting it into the div at the end of the HTML body. To do this we will need to wrap our paragraph in the teleport element and use vues composition API to create a reactive toggle.
videovueteleportJustin Brooks • September 5, 2020
Fundamentals of Reactivity in Vue 3
In this video, we learn about the changes made to Vue 3 reactivity system and how to use them with the composition API. We also take a look at the difference between ref, reactivity and custom refs.
videovuereactivityJustin Brooks • August 29, 2020
Lifecycle Hooks in Vue 3
In this video, we take a look at using the Vue lifecycle hooks in Vue 3. We also look at the addition of two new hooks added to the Vue framework. Overall, this video aims to provide an understanding of how to use the lifecycle hooks in Vue 3. Examples of these hooks will be shown in upcoming videos.
videovuelifecycleJustin Brooks • August 25, 2020
Quick Basics of Vue 3 Composition API
This video aims to provide a quick overview of the new Vue 3 composition API. In this video we will create a counter component that uses 5 of the most essential functions in Vue 3, setup, ref, watch, computed and onMounted. In later videos, we will take an in-depth look into how each aspect covered in this video works.
videovuecomposition-apiJustin Brooks • August 22, 2020
Introduction and Advantages to Vue 3 Composition API
Why would you want to use the new Vue 3 Composition API? This video aims to explain how and why you may want to use the new composition functions in your next project.
videovuecomposition-apiJustin Brooks • August 18, 2020