Creating Your First Vue 3 App with Vite - A Beginner's Tutorial

Vite is a new tool to improve your frontend development experience - especially in Vue! It's lightning fast, easy to setup, and intuitive for people with experience with the vue-cli.

In this video, we'll cover the basics of Vue 3 and the Composition API, see how to create your Vue 3 app with Vite, and look at some other concepts like lifecycle hooks, simple event listeners, and more.

COMPANION ARTICLE WITH CODE

FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS

follow me on twitter:

[danieltatarkin]

This is a really awesome summary! An idea I have is to re-create this video every year highlighting any new changes in initializing new projects using latest best practices.

[jessicaryan]

Doing the course on your website. I am a few lessons in and this is already an outstanding course. Very well explained and presented. Excellent value for money. Hoping you release more courses in the future.

[nyagah]

That tutorial was great. Straight to the point and got me to solidify the little that I know about the composition api.

[yudilokhande]

I have watched a ton of vue tutorials, and I must say that yours was one of the very best. It'll be interesting to see where you go in the future.

[draggingtheshutter]

This format does not allow me to get bored. Very well executed

[mohithp]

ur such a great creator i am struggling to learn react or vue u cleared my doubt real thanks <3

[ReSpawNnL]

Seriously binging your channel right now. Need more content!

[ssahillppatell]

Thanks. Best video about the topic out there.

[aliyenidede]

I can't believe you have so few videos. You shot very high quality content, I hope you continue

[guillermodanielmazzarigiov]

Thanks for the vid! How could you make a Vue boilerplate including router components with vite?

[mrralphbur]

We will watch your career with great interest.

[ngegamesantai_]

Subsribed and I'm expecting more content from you. Keep it up dude 😉

[Oderwat]

I just wonder why you did not use <script setup> style when the scaffold already showed it.

[susmoysengupta]

Your videos are short and very much understandable. Please make videos on Vue authentication using vuex and laravel sanctum or passport.

[hummmingbear]

Would love if you posted a link to the code repo with this example in it

[mytop]

What does "export default" ?

[CatoTheAdopted]

This is a great tutorial. Subscribed. Not to be too cheeky, but any chance you might know how to properly configure Vite to run with Postcss and Autoprefixer? I've been digging around for the last few days and can't seem to get autoprefixer to work with Vite at all.

[leostereo]

should we consider use vite from now on ?

[deweywsu]

Maybe it wasn't meant to, but the initial install fails on Windows (error: ERROR_REQUIRE_ESM)

[edenassos]

Now where's the Vite 2.0 video? Haha