Vue3 Learn

Posted on  by admin

Vue 3 comes with a lot of nice new features like native portals, the Composition API, suspense and more concepts you’ve probably heard somewhere by now.

Now that it's officially released and the ecosystem adapts and evolves, we'll be using it more and more in production. So it would be a good idea to level up your skills and dig into best practices for using all the shiny new features!

Or maybe you want to learn Vue from scratch and want to start with the new version already?

No matter if you’re completely new to Vue or want to upgrade from Vue 2 – there are great resources out there for you to learn all about Vue 3.

Let's start with the most obvious resource: The official docs.

We talked to a lot of Vue devs over the years, and many of them pointed out how useful the Vue documentation was for them when they were starting out.

Using $refs to Access DOM

We can only agree that they're an excellent starting point. If you have some knowledge of HTML / CSS and JS already (or maybe even with another framework?), they'll help you get started with the basics.

Start with the Introduction if you’re a Vue newbie .. or check the Migration Guide if you already have some experience with Vue 2.

  • If you’re the audiovisual learning type and want some structured guidance, there is a solid selection of video courses available.

  • Many are taught by industry experts or Vue core team members.

Transcript

They know exactly what's important and always have some tips and tricks up their sleeves.

From our point of view you can’t really make a wrong decision with any of these:. If you have visited the official Vue docs, you maybe already saw them referencing video courses by Vue Mastery.

On Vue Mastery you can choose different learning paths with selections of courses for beginners, intermediate and advanced developers, as well as a distinct Vue 3 course track.

They cover anything from basic concepts like reactivity to real world example projects.

There's also a Deep Dive course with Evan You available. Their Intro to Vue 3 course is completely free.

👉️ Go to vuemastery.com. Vue School also offers a lot of quality video courses by a variety of teachers. For beginners, they have a free Vue.js 3 Fundamentals course.

Create a Vue 3 Project Using GitHub and NPM

If you’re experienced with Vue 2 already you may enjoy their deep dive courses What is new in Vue 3 or their Vue 3 Masterclass.

Vue School also offers remote, live Vue workshops if you want a more intensive training.

👉️ Go to vueschool.com. There's a Vue learning path on Frontend Masters as well with courses by core team members Sarah Drasner and Ben Hong.

Creating a Vue 3 App with Vue CLI v4.5+

It includes an Introduction to Vue 3, a course about building apps with Vue & Nuxt, and best practices for production-grade Vue.js.

👉️ Go to frontendmasters.com. The Complete Vue.js 3 Crash Course by Lachlan Miller on Udemy. Vue 3 – The Complete Guide by Maximilian Schwarzmüller on Academind.

If you prefer to learn through reading, there are a lot of (e-)books available to start or to wrap your head around advanced topics. Vue.js 3 Cookbook Discover actionable solutions for building modern web apps with Vue & TypeScript .

Vue.js 3 Book Fullstack Vue.js projects with Bootstrap 4, Node.js, Express & MongoDB .

Warp-up

Vue.js 3 By Example Build eight real-world applications from the ground up using Vue 3, Vuex, and PrimeVue .

Large Scale Apps with Vue 3 and TypeScript Book & Guide . Vue - The Road To Enterprise Advanced concepts for developing large-scale applications with Vue 2 & 3 .

Rethinking Reusability in Vue Ebook about Code Reusability . Vue 3 Tutorial (for Vue 2 Users) – Tutorial by Anthony Gore from vuejsdevelopers.com.

Vue Vite offers faster startup, hot reload, and compilation speeds than bundler-based solutions during dev.

Creating your first Vue 3 project with Vite – Article & Video by Matt Maribojoc from learnvue.co. Vue 3 Tutorial: Build 10 apps in 10 hours – Video by Bitfumes.

Vue.js Tutorial for Beginners – Video series by The Net Ninja. Migrating a big old codebase to Vue 3 – Conference talk by Natalia Tepluhina.

Books

Introduction into the Composition API – Conference talk by Gregg Pollack.

References

What you’ll love in Vue 3 – Conference talk by Alex Kyriakidis. Composition API Best Practices – Conference talk by Thorsten Lünborg.

Tutorials

Link to Joblist.app. Vue is one of the more popular front-end JavaScript frameworks.

More free learning resources

It makes it simpler to create powerful websites.

We just released a Vue course on the freeCodeCamp.org YouTube channel that will teach you the latest version of this progressive JavaScript framework.

Gwendolyn Faraday developed this course. She previously created one of the most popular Vue courses on the entire internet and now she's back with this updated course.

In the course, you will learn the fundamentals of VUE and apply what you learn to build an e-commerce website. Here are the sections in this course:. Vue JS Directives. Events and Methods.

Component Props. Lifecycle Hooks.

Adding Items to Cart. Reuseable Components . Vue Folder Structure.

  • Styling with SASS. Adding Items to Cart. Watch the full course below or on the freeCodeCamp.org YouTube channel (4-hour watch). Gwendolyn Farraday previously created one of the most popular Vue courses on the internet.

  • Now she's back with an all new full Vue course to teach the latest version to absolute beginners. My name is Gwendolyn Faraday and I will be your instructor for this course. I have been a professional software developer for over five years now.

And I've had the opportunity to work in several different languages and frameworks over the years, including Angular react, and Vue js.

I currently work as a software consultant in various technologies, and use Vue js as my preferred front end framework for any type of web or mobile application.

If you would like to reach out to me, you can find me anywhere online at Faraday Academy. If you have any specific feedback for this course, please email me at [email protected]

Wrap-up

I hope you enjoy this course. Vue js is a JavaScript framework for building applications and websites.

How does it help you? It provides tools out of the box to help you make your websites and apps faster and more dynamic. And it also gives you a set of standards for code organization and expectations for individuals and teams that work in the same code base.

If you have heard of the virtual Dom before, Vue js is a virtual Dom framework. If you don't know what that is, it's okay.

It's not important for understanding this course. The virtual Dom basically makes JavaScript web applications a little bit faster and more efficient Vue by itself is extremely lightweight, you can get it down to about eight or 10 kilobytes g zipped.

Vue 3 Props

Although in a practical sense, your Vue and bundled JavaScript will probably never be that small in an application anyway.

Although it is good to know that Vue doesn't have a lot of extra code taking up more space in your application.

Vue 3 Shopping List Tutorial: Composition API and Reactive State

Why does Vue JS call itself a progressive framework, they use the term progressive to mean that you can use it anywhere from small features on websites where you want to add some interactivity and using it as kind of a drop in replacement for jQuery and legacy applications.

Adding the Vue 3 Component's Template

All the way up to using it as a more full featured batteries included framework for large scale applications like Gmail or Twitter or something like that.

Create a Vue 3 Project from Vue 2 and The vue-next plugin

You get to decide what features you want to add in from the Vue ecosystem beyond the core library, and it's extremely flexible to allow you to choose the tools and other libraries you want on your own.

Or you can use the ones that Vue provides in its ecosystem by default, many people and companies are using it for its incrementally adoptable nature.

Video Courses

That means that if they have a legacy application, it's quite simple to update their application page by page to turn it into a Vue application into a more modern application, instead of having to rewrite the whole app at once.

Fragments

That is one very convenient thing about Vue j s. Let's look at a really quick overVue of the history of Vue.

Understanding Vue 3 Setup Method

The Vue project was started in 2013 by its founder, Evan you. version one launched and started to become popular in China where revenue is from a few years later, Vue two was launched with many new updates and improvements over Vue version one.

And with the release of version two is really where we start to see the massive growth of Vue j s and popularity in the rest of the world.

So many developers had not heard of uJs before 2017.

But from 2017, and especially in 2018 and 2019 Vue really solidified itself as one of the top three JavaScript frameworks.

How to Install Vue 3?

Many Vue conferences started popping up lots of content creation around the Vue ecosystem started to take place.

And many companies started to use Vue for their applications as well. In fact, many companies that do you recognize, which are household names in the West, use Vue, j s now.

And now we can see that Vue version three has been released in fall of 2020. And along the way, over these last six years, we see many different libraries that are also created and maintained by Ave and the core team of Vue.

Like the vcli Vue router in Vue x, also being regularly updated to match with the current version of Vue.

Vue School

Even now, with Vue three just released, we see that a new version of Vue, router and VX have also been released to be compatible with Vue version three.

In this course, we will be using the Vue j s core library as well as the vcli.

For more information on Vue, x Vue router, Vue test utils and some of the other tools in the Vue ecosystem that I don't cover in depth in this course, I will be making future courses about those on my Faraday Academy YouTube channel.

So let's get started with learning v j, s. And keep in mind, I'm using v3 here. So make sure you are at the correct website, which is v3 dot Vue, J s.org.

Global API and createApp

And then click on getting started here. This will take you to the documentation. And by default, the introduction to Vue j s, I'm going to go straight to the installation link on the sidebar here.

Step 4 — Implementing the Vue 3 Composition API

And if I scroll down, I can see the place where it says CDN. And you'll notice here it says Vue add next make sure you are importing the right library from the right URL here at next is necessary, because Vue three is not in the main Vue j s repository yet it's in this other repository that you can reference with that next, which points to Vue three, until the whole ecosystem and everything finishes getting updated.

There is going to be a difference between importing Vue to an importing Vue at next, which points to Vue version three.

And I'm going to go ahead and grab this script tag here. So I'm in VS code, and I just have a basic HTML file.

Understanding Vue 3 Ref for Reactive Variables

And I'll be adding Vue j s into this application to demonstrate the basics of Vue syntax before I get into building a larger application with the Vue COI.

Understanding Vue 3 Components

So first of all, I'm going to be using VS code plug in called live server.

Step 3 — Creating a Vue 3 Component

And you can see at the bottom here it says go live. So if you go to plugins, which is this four box icon on the side, you can type in live server and click on this plug in.

And you can install it if you do not already have it installed. But I already have it installed and enabled.

Prerequisites

So I'm going to go back to my code over here.

What's Vue 3 and Its New Features

And at the bottom, I'll just click go live. And you can see it shows my HTML page, I'll just zoom in a little bit here with the static content.

Initializing a New Vue 3 App

Now if you don't want to use live server, you can just come here and right click and click on copy path.

And then you can go to your browser and paste that absolute path to the project or to your index dot HTML file. And it will display the same way in the browser.

Importing our Vue 3 Component

live server just makes things a bit easier because it will automatically refresh when you make code changes.

  • And it also opens up the browser page for you. But it's up to you if you want to use it or not.

  • So now I want to add Vue to this application. So I'm going to go inside of the body tag and just below this div, just paste in the script tag that I just copied.

So now this is all that I have to do to import Vue and start using it in my application.

I don't actually need Babel or anything else to get started. So to write my own custom code, I'm going to add my own script tag right below that.

Step 2 — Creating a New Vue 3 Project

So there's basically two things that I need to do here.

Conference Talks

And the first is to use this Vue variable that I have access to from importing Vue. And that script tag and Vue gives me this method called create app.

Specialized & advanced topics

And that basically creates my Vue application. And I can pass it an options object, which I'll get to in a second. Now I need to somehow connect this JavaScript for my Vue application with the HTML that I'm going to be displaying in the browser.

Events API: $on, $off, and $once Are Removed

And that is through another method that I can actually chain on to this Vue instance I'm creating.

So I'm actually going to save this as a variable. I'm going to say let app equals Vue create app. And then I'm going to use this other method called Mount because I want to tell it to mount my Vue application somewhere in my HTML here.

Do you Need to Learn/Use Vue 2 or Vue 3 at this Time?

So I'll do ID equals, I'll just call it app.

And I'm actually going to tell it to mount to my Vue j s application inside of that div. And that means that the Vue j s instance that I'm creating here will be able to connect and display data and interact with any kind of DOM element inside of this div here.

Step 1 -- Installing Vue 3 CLI and Creating a New App

So that will be more clear in a second. So now let me change this, let me create a variable on my Vue instance.

And to do this, I need to create a function called data here. Now this whole object here is called the options object.

So any variables or functions that I'm going to use in my application will live on this object here.

Frontend Masters

So specifically with data that is a function, and it needs to return an object.

Step 4 -- Adding the Router View and Navigation

And on this object that is returned by the data function, I can put whatever variables I want.

So I'm going to create a greeting variable. And I'm basically going to say hello, v3, then exclamation point.

And now I can actually go into my div here, delete that static code there.

And I'm going to use my variable now.