Vue.js Tutorial: Beginner to Front-End Developer
Рет қаралды 321,444
Күн бұрынIn this comprehensive course, Jeremy McPeak will teach you the fundamental concepts you need to start building applications with Vue 3.
► Download Vue.js scripts and plugins from CodeCanyon: codecanyon.net/search/vue.js?...
UI frameworks have drastically changed the way we write web applications. There are many frameworks to choose from, and picking one can be hard. In this course, you'll learn why Vue.js is a great choice, and you'll discover how to use it in detail.
You'll start with building the simplest Vue components and learning to use core features like data binding, props, events, and computed properties. Then you'll build that knowledge step by step with practical projects learning how to use the Vue CLI, forms, watchers, and custom events. You'll also master key concepts like the Vue router and the Composition API.
By the end of this course, you'll be confident in using Vue.js for all your front-end development projects.
Here's what the course covers:
1. Introduction
00:00:00 1.1 Introduction
2. Vue.js With no Tool-Chain
00:02:31 2.1 Getting Started With Vue
00:10:51 2.2 Using Loops to Generate Content
00:17:00 2.3 Binding Data to Attributes
00:25:11 2.4 Setting Up Events
00:33:15 2.5 Binding CSS Classes I
00:41:48 2.6 Using Computed Properties
00:48:05 2.7 Binding CSS Classes II
00:55:00 2.8 Introducing Components
01:04:19 2.9 Understanding Data Flow
3. Using the Vue CLI
01:13:00 3.1 Getting Started With the Vue CLI
01:21:30 3.2 Starting a Project From Scratch
01:32:18 3.3 Applying CSS to Components
4. Working With Data
01:41:51 4.1 Using the created() Lifecycle Event to Load Data
01:48:19 4.2 Working With Unset Props
01:55:19 4.3 Deciding When to Load Data
02:01:14 4.4 Working With Forms
02:08:43 4.5 Validating Forms
02:14:39 4.6 Updating and Filtering Data
02:21:05 4.7 Using Watchers
5. Creating and Using Custom Events
02:25:19 5.1 Creating Custom Events
02:32:48 5.2 Writing a Global Event Bus
6. Using Vue Router
02:44:37 6.1 Introducing Vue Router
02:53:19 6.2 Using Route Params
02:59:18 6.3 Loading Data for Views
03:10:07 6.4 Watching Params to Reload Data
03:16:57 6.5 Using the Router's Active Class
03:23:36 6.6 Nesting Routes
7. Using the Composition API
03:30:52 7.1 Introducing the Composition API
03:40:26 7.2 Providing and Injecting Dependencies Into Components
03:48:18 7.3 Accessing Props and Router Functions
03:54:58 7.4 Binding Data and Working Wth Forms
04:06:00 7.5 Defining Computed and Watched Values
04:16:18 7.6 Implementing the Delete Functionality
8. Conclusion
04:20:42 8.1 Conclusion
NOTE: Current recommendations are to use create-vue with the Vite tooling for new Vue projects. vue-cli is in maintenance mode, but still works for creating Webpack-powered Vue apps like in this course.
► Read more on Envato Tuts+: code.tutsplus.com/vuejs-tutor...
► Download unlimited photos, fonts, and templates with Envato Elements: elements.envato.com/?...
Read free Vue tutorials on Envato Tuts+: code.tutsplus.com/categories/...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: tutsplus.com/?...
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: elements.envato.com/?...
► Subscribe to Envato Tuts+ on KZfaq: / tutsplus
► Follow Envato Tuts+ on Twitter: / envato
► Follow Envato on Facebook: / envato
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@cypher330 4 күн бұрын
Man I cannot thank you enough. This is the best Vue tutorial on YT! Your explanations and extensive commentary on reasoning and syntax breakdown is just gold. Really appreciate your effort!
@alnahian2003 Жыл бұрын
This tutorial is an absolute gem! Not only is the instructor a pro at teaching Vue 3, but his soothing voice and clear explanations make it easy to follow along. I could listen to him all day. Thank you for sharing your knowledge and making the learning experience enjoyable!
@envatotuts Жыл бұрын
You're very welcome!
@ExplorerOfTheGalaxy Жыл бұрын
ASMR kinda vibes.
@tahawahiddaw6259 9 ай бұрын
no doubt
@user-ji9he8cf5f 10 ай бұрын
One of the best I've seen so far. Instructor teaches at a very good pace, such that we can follow. Content and delivery are great!
@AlexWard94 Жыл бұрын
Coming up to halfway on this tutorial and just wanted to express my sincere thanks. I've never been able to get stuck into Vue before but I'm finally starting to understand its merits and how to work with it. Exceptionally well structured course. Very grateful for the time you put into this.
@emalsidog Жыл бұрын
One of the best courses I've ever seen. Thank you for your work
@Luca-ts8dq 10 ай бұрын
I just finished watching your Vue.js video, and I have to say, it was excellently paced! You explained the solid concepts with great rhetoric, and I really enjoyed every bit of it. Thanks for sharing this valuable content!
@johnaziz57 25 күн бұрын
One of the few courses on youtube that I have actually followed completely till the end. Thanks a lot🙇
@boloow 10 ай бұрын
Just finished the first hour and came to thank you for such an amazing tutorial.... Thanks a lot for using your time to help us to be better devs and learn new frameworks.
@ukaszjanczak3999 Жыл бұрын
This tutorial is one of the best courses I've ever watched. Everything is explained in a very simple way, which makes it easy to follow and learn. Thank you very much!
@envatotuts Жыл бұрын
You're very welcome!
@lombord69 11 ай бұрын
I love the way how you explain complex concepts easily, Thats a great Vue course so far and thank u so much♥
@simon1386 Ай бұрын
Found this precisely when I needed it. 30 minutes in and I know I’ll stay there until the end. Thanks so much
@codycalvert2116 Жыл бұрын
It would seem I'm not the first to say, which should all the more go to credit your work here, but I am about half way into following along with your video and I would like to express my gratitude to you for it. I am brand new to coding, I have no work experience in the field nor have I been able to attend a college for computer sciences. I am trying my hardest to develop a new, more lucrative set of skills to change both mine and my partners lives for the better. I thoroughly appreciate the time you've taken to show multiple methods of reaching the same goal and explaining the differences in them, as well as your positive attitude throughout the video. Thank you for the help, is all I'm trying to say, thank you.
@pascals5408 Жыл бұрын
The only tutorial that actually worked, thanks
@Benmenesesjr Жыл бұрын
Great tutorial, straight to the point with detailed explanations and you never stray off into random tangents, also great voice xD
@nilanjanmukhopadhyay8369 3 ай бұрын
Starting my journey with Vue and this was my first tutorial. As a beginner, it's really good!
@iamzareef Жыл бұрын
Fortunately, Envato Tutorials never disappointed me. It has the most simply explained courses without any doubt.
@akaza7613 Жыл бұрын
One of the best Vue js video in the entire KZfaq
@noOne-fe4ni 6 күн бұрын
New achievement unlocked: 🎉 The first long KZfaq tutorial that I actually completed and didn't leave halfway through.
@amaansayyed1192 2 ай бұрын
2:24:00 So far so good. Been halfway through the video and I'm in love with it , clear and on point explanation .One suggestion , please add git repo for following through the code snippets. Thanks Jeremy😊!
@legendrags 2 ай бұрын
I was skeptical about using UI libraries thinking they were unnecessarily complex but this really told me its very easy. thanks man!
@macrooooo__ Жыл бұрын
imp notes: 35:30 - css conditionals 41:53 - computed property
@mildredamores9508 Ай бұрын
This is an absolute treasure! Thank you very much!
@jbarriossandrea 5 ай бұрын
This is the best vue tutorial I've seen and it's completely free! I have paid for vue tutorials and weren't even close to this quality, BTW has some said that your voice is very similar of the cinemasins narrator? 😅
@seyhaseng1077 Жыл бұрын
Thank you for the course!
@enderzombie_tv Жыл бұрын
It's a really good course!!! I watched it in 1 week completly. Step by step. It was very nice and understandable. I watched this course because I need Vue.js for my work. Thanks for all! King regards.
@envatotuts Жыл бұрын
Glad it was helpful!
@Samak6-xj8lh 2 ай бұрын
This course is soo legend. Thank you very much!
@kosolomon123 Жыл бұрын
i love this man's voice
@hirookenji 10 ай бұрын
The only Vue tutorial I need to learn the basics. Tried every videos out there but this is the best for me.
4 ай бұрын
I find this also a great content, great teaching, and really cool animation effects, I enjoy it really much!
@mark_45129 Жыл бұрын
thankyou so much jeremy🥰
@wovasteengova Жыл бұрын
Almost done with my MEVN app. Just need to go over Vue again. ITs been a year since iv done anything with it. This is just perfect timing by Envato.
@AkashPandya9 4 ай бұрын
Man what a tutorial, after searching online for hours, finally found a video which explains everything with absolute preciseness 🙌🏼❤. Subscribed! Also loved the vscode theme, can I know the theme name?
@lethalmohit7423 5 ай бұрын
Best tutorial on vue
@prasad2716 10 ай бұрын
At intro, I thought this is not for me hearing to all that bgm and 1.5x speed.......but after listening to the explanation in starting with viewjs, I feel blessed😅
@mortennielsen5507 6 ай бұрын
A really excellent tutorial, thank you
@TuNguyen-nq1df Жыл бұрын
Thank you so much, I really appreciate what you have done. Brilliant 🥰
@envatotuts Жыл бұрын
You’re welcome 😊
@varaprasad6531 Жыл бұрын
Thanks Guru, for this amazing content.
@envatotuts Жыл бұрын
Glad you liked it!
@exincident Жыл бұрын
Brilliant . Thank you so much . I wanted to try my hands on vue . Here we go
@envatotuts Жыл бұрын
Glad I could help
@adamwhite425 Жыл бұрын
@@envatotuts can you make video about Json for javascript please
@lorilee6076 Жыл бұрын
Great tutorial. However, 2.8 'introducing components', the template syntax in the app.component doesn't appear to be correct. It doesn't like the tick marks around the div.
@hoda67286 Жыл бұрын
Thanks so much 🌹 keep it up ☺️
@ydnikolaev 9 ай бұрын
Thanks for this tutorial!
@imadsaddik Жыл бұрын
Thank you so much for sharing this material, I am enjoying it a lot
@envatotuts Жыл бұрын
Happy to hear that!
@ZiaulKarimIfaz Жыл бұрын
First recommended video for learning vue as a beginner
@envatotuts Жыл бұрын
Hope you enjoyed it!
@codycalvert2116 Жыл бұрын
while writing the code in the markups you paste in is also good practice, it may also be nice to include information regarding where and how you can source those things already finished from the internet.
@robertasprenger7594 Жыл бұрын
I hate front-end development but this tutorial made me hate it less
@aaronxin7732 2 ай бұрын
As English is not my first language, finding a good tutorial recorded in standard English is so difficult. But this video is just the one that I am looking for, friendly to the ones like us taking English as seconds language
@Pacxman 7 ай бұрын
Incredible Vue.js tutorial! After wanting to know Vue.js, this tutorial made it a breeze. Huge thanks to the creator for simplifying complex concepts. Feeling empowered and ready to dive into Vue.js magic!
@markjayclemente9732 Жыл бұрын
Hello how did you do 18:08 the shortcut where you were making the links into objects
@johnlyons7678 Жыл бұрын
Im at the end of 7.4 Binding data and working with forms. Has anyone encountered some bug where whenever one tries to edit or cancel on the edit page, I get an error stating: router.push is not a function. What's strange is that it works. If I save the page or reload it, everything gets updated.
@JesusGil90 Жыл бұрын
the best explanations 👏👏👏
@envatotuts Жыл бұрын
Glad you think so!
@ArabiDhaki Жыл бұрын
Thank you , this is a piece of art .
@envatotuts Жыл бұрын
Wow, thank you!
@florianbader4933 Жыл бұрын
Nice Tutorial! Very well described. I can listen to your voice for hours.. Perfectly done!! As some ppl mentioned, it would be cool if you share your IDE settings with us, Extensions/Theme. Your Theme makes more sense to me, than my own.
@envatotuts Жыл бұрын
Glad it was helpful!
@andreiindries1121 Жыл бұрын
Hello, I think he is using Community Material Theme High Contrast.
@ShaneSheriff 8 ай бұрын
It's so crazy that tutorials like this exist for free. Thank you
@therealman1150 Жыл бұрын
Thanks a lot for this amazing tutorial.
@envatotuts Жыл бұрын
Your welcome.
@jalalbakir7749 11 күн бұрын
Thank you very much
@mr.spooks1478 Жыл бұрын
how did you name your component "Navbar"? If i'm trying to name it as you did, i will always get the "1:1 error Component name "Navbar" should always be multi-word vue/multi-word-component-names" error. "NavBar" works, however for some reason this error keep appearing even after i fix the issue and this can only be fixed by running "npm run serve" again
@marekcaban3507 Жыл бұрын
Hello thank you for the great tutorial, I am just stuck right now at the end of the course and I can't get navbar to automatically update changes in the pages. Everything up until that point works great but even with the changes to the listener in Navbar.vue the pages wont update + I got no error in the console and every other thing works. Some kind of source code would be really great.
@josbexerra8115 Жыл бұрын
Gracias totales
@not_amanullah 4 ай бұрын
this is helpful ❤
@parthkolgiri7501 Жыл бұрын
Thanks mann!!!
@maxellmilay Жыл бұрын
Wonderful tutorial! I would just like to know if the starter project repository is shared, because I can't seem to find any link.
@eddawry 8 ай бұрын
when i started learning this cource with you, i really feel that i don't understand anything but after start learning composition api i find that i understand more than what i expect to learn. thank u 🐿
@dedraks Жыл бұрын
Thank for the tutorial. I have a question not related to vue. How do you use zsh inside powershell?
@ktm00072 Жыл бұрын
Great tutorial. Enjoying a lot. But should have a git repo along with it. Hard to follow the code. Git repo would be easy for reference.
@joshuahochstedler3436 11 ай бұрын
The styling from the bootstrap package doesn't seem to be applying, any idea why?
@congdatt Жыл бұрын
nice course bro. many thanks bro :D
@envatotuts Жыл бұрын
Glad you like it!
@willywheels221 5 ай бұрын
I already installed router using "npm install vue-router --save" and "npm install vue-router@next", created routes.js and put "import {createRouter, createWebHashHistory} from 'vue-router' " exactly as you did, but I always get this error when running on browser said "Module not found: Error: Can't resolve 'vue-router' in '...........\src'" Please help I tried many ways, but still can't fix.
@willwalker474 11 ай бұрын
This is stupid, I know, but at 1:53:58, the instructor passes a "rawProps" argument to the default function, and my server is throwing a "no-unused-vars" error and refuses to compile. Is there a way to get rid of this error, or a way to initialize rawProps, or am I missing something altogether?
@kaza6299 Жыл бұрын
How did you change code font and what font it is ?
@AliHaidar-zw1jx Жыл бұрын
We are waiting
@baaskalogy Жыл бұрын
well created very inspiring and educating tx
@envatotuts Жыл бұрын
Glad you enjoyed it!
@osamaa.h.altameemi5592 Жыл бұрын
Hi, the urls for the course materials are not working, any one got them on github?
@karlthedentistkrey Жыл бұрын
Source Code would have been dope. But apart of that: very nice tutorial.
@ashutoshpandey1473 Жыл бұрын
Thank you so much, it is helping me to learn basics as well as key fundamentals of VueJS. Also can you please tell what VS Code theme are you using?
@andreiindries1121 Жыл бұрын
Hello, I think he is using Community Material Theme High Contrast.
@samueledenicola 10 ай бұрын
Super useful guide! By the way what font are you using in VSCode? :)
@user-pd1tf1vs1l 10 ай бұрын
Hey, what's your vscode Theme ? thanks ! :)
@owpbush367 Жыл бұрын
Can i have source code? it seems something getting wrong with my code when i try to apply underline to text
@well_done_o7 11 ай бұрын
bro love you
@not_amanullah 4 ай бұрын
thanks ❤
@lowkey_X 4 ай бұрын
Any recomendations for vscode setup ? thanks
@muazrahman2255 26 күн бұрын
may I know what vscode theme that you're using ?
@deyuu_waisei 16 күн бұрын
Done watching, new subscriber here👋. I'm looking forward for vue + laravel tutorial.
@rajmajumdar5253 11 ай бұрын
Why Vue CLI when it's on maintenance mode, even the official version says to use vite instead of Vue CLI 🤔🤔?
@chetandhavse1581 Жыл бұрын
Perfect!!! , I watched using playback speed of 1.5, not a single time I had to reverse and watch again. It is that clear, Thank you very much. I have a question, Due to certain constraints I have to use CDN (and not the npm way). I have to develop a SPA website having around 100 pages / SFC. What are the major drawbacks of using CDN compared to npm,? Are there any showstopper?
@dalemoayokunle7330 Ай бұрын
Were you able to achieve it? Will like to hear from you😊
@caragramgoogleweb3.023 Жыл бұрын
Excellent ☝️
@envatotuts Жыл бұрын
Thank you! Cheers!
@mariumbegum7325 Жыл бұрын
Great content 😃
@envatotuts Жыл бұрын
Glad you think so!
@ProdBySneezy 8 ай бұрын
I have been using react for a while now, but this video has made me decide to start using vue, it makes so much more sense than react
@HamidAbbaszadeh Жыл бұрын
Which font do you use in Code? Please
@lifewinsful 4 күн бұрын
If we make pagesStore reactive(), then some events can be removed
@Dr-Tran-2002 5 ай бұрын
Can I have the compete (final version) source code for this demo/video?
@RebelSurge 6 ай бұрын
cool video)
@azhyabdalqadir4293 5 ай бұрын
Thanks
@stevenklap Ай бұрын
Hi! Absolute NOOB here.. - got everything up and running - my Index.html code is exactly the same as far as I can tell - got stuck at around 9:30 of the video, where my page doesnt show the softcoded pageTitle and content.. - All I get is {{ pageTitle }} and {{ content }}, so it doesnt get the info from the Vue.createApp script. Any pointers on what I've might have missed? EDIT: Nevermind... fixed it.. was missing one ">" in my code..
@jediampm Жыл бұрын
Vue Cli ? this was deprecated since version 3.2. recommend you to read the official docs how to install vue using npm.
@Benmenesesjr Жыл бұрын
For section 7.4 I cant get the navbar updating after changing :( Ive tried to look back at the code and went back to the event bus creation to see if I did something wrong but I just cant find the error rip.
@darkerzyeow3628 Жыл бұрын
I'm also looking for solution to this, please let me know if you have solved it
@Romulan1993 Жыл бұрын
@@darkerzyeow3628 did you solve it yet?
@yoduh99 Жыл бұрын
I helped another person solve this, and I can say for at least that person they had the wrong data() property name in Navbar.vue. It should be "data() { return { theme: 'light', pages: [] } }" where instead of "pages: []" they had "data: []". The quick change where this happens in the video is shortly after 3:22:04
@filipkupczyk7673 9 ай бұрын
omg bro i've been looking for a mistake for hours, thank you very much@@yoduh99
@helloyou191 4 ай бұрын
@@yoduh99 THANK YOU, was looking for a solution throughout the comments :), maybe if the composition API would've been used, the compiler would have risen some warnings xd
@JuriBinturong Жыл бұрын
amazing course
@envatotuts Жыл бұрын
I'm glad you like it
@JuriBinturong Жыл бұрын
@@envatotuts thank you for this.
@programmersohan599 Жыл бұрын
Awesome
@subir456 18 күн бұрын
what is theme ? Looks very nice.
@harisodobasic4316 11 ай бұрын
thanks for the tutorial. I enjoyed it till section 4.5 but then you added out of nowhere so much code. Would it be an option to provide the sample code? that would be helpful when following along
@humuhumunuku2113 11 ай бұрын
Stop the video and copy, dude
@aryanesmaili2069 Жыл бұрын
what vscode extension does he use that highlights Vue codes in purple? 29:15 for example
@jshaya96 Жыл бұрын
It's just a normal theme - The directive used is essentially an attribute on the tag so it's given an attribute colour. If your IDE is struggling with some language context, maybe extensions like Volar may help you here?
Fabiosa Animated
Рет қаралды 9 МЛН
ISSEI / いっせい
Рет қаралды 93 МЛН
Graphics Solution Tricks
Рет қаралды 14 М.