Vue JS 3 Tutorial for Beginners #11 - The Composition API (part 2)

[@chideraugo6878]

this is honestly one of the best channels on youtube to learn code, he explains everything just perfectly. thank you so much, net ninja. you're doing good work

[@djeR876]

facts

[@TheShifu13]

god* work

[@janmichaelbesinga3867]

i couldn't agree more.

[@sathvikmalgikar2842]

this entire series is extremely intuitive to follow

[@qhphan5]

For the db.json file: { "posts": [ { "id": 1, "title": "Welcome to the new blog", "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur felis libero, in porta magna vestibulum eget. Suspendisse malesuada dui in ligula imperdiet pharetra. Vivamus felis nisl, gravida non porttitor eget, molestie sed lorem. Integer finibus dui arcu, nec egestas nulla posuere nec. Quisque eu ex nec dolor egestas condimentum ac ac nulla. Phasellus ut cursus ligula. Etiam vel laoreet erat. Vestibulum sit amet erat id velit sodales efficitur id in sem. Quisque ac cursus nunc. Aenean feugiat ex metus, at tristique elit accumsan eu. Nam placerat dolor sit amet lorem aliquet congue.", "tags": [ "webdev", "coding", "news" ] }, { "id": 2, "title": "top 5 CSS tips", "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur felis libero, in porta magna vestibulum eget. Suspendisse malesuada dui in ligula imperdiet pharetra. Vivamus felis nisl, gravida non porttitor eget, molestie sed lorem. Integer finibus dui arcu, nec egestas nulla posuere nec. Quisque eu ex nec dolor egestas condimentum ac ac nulla. Phasellus ut cursus ligula. Etiam vel laoreet erat. Vestibulum sit amet erat id velit sodales efficitur id in sem. Quisque ac cursus nunc. Aenean feugiat ex metus, at tristique elit accumsan eu. Nam placerat dolor sit amet lorem aliquet congue.", "tags": [ "css", "webdev", "coding" ] } ] }

[@QuyenTran-wu8pj]

thank youuuuuu

[@vdeschuy190]

Hero!

[@samueladeniran1286]

Thank you so much

[@teshell8317]

Thank you bro

[@vuedev6324]

Legend

[@izzatullokanoatov370]

Yeah, I am that sort of person who puts "like" first before watching The Net Ninja videos. Damn man. Awesome series )). Love watching

[@ILoveChocx3]

Hey Net Ninja, just wanted to express my appreciation for the in-depth tutorial series you've created for us! Just wanted to give a little feedback to perhaps include a walkthrough on provide and inject which would really wrap up your already stellar Composition API tutorial.

[@pyplacca]

Wish I could give your tutorials a million likes. Thanks a billion for being such a great tutor ❤️

[@BullWinkleBull]

Man, you are the best Vue teacher ever! With great British accent as a bonus! Thank you a lot!

[@GurmuGessese]

Thank you very much, net ninja. I have finished all this vue js 3 playlists and learnt a lot from you. You explain everything in detail, Thank you again!

[@NetNinja]

Glad to hear that :) thanks for watching Gurmu!

[@mark_midnight]

Finally after some inconsistent days of learning Vue, I finished it and will still be Thankful for this wonderful course to start learning, although this course is 2years old I still pick offs some stuffs to learn and will continue to dive in composition API with the script setup again super Thank you for this free courses here in KZbin godbless :)

[@NetNinja]

Thanks for watching and taking the time to comment this :)

[@Carl-yu6uw]

Another good intro series, thank you. Guess next level here is the data from / to dB and also being shared across components via a store. Would be interesting to find a case study slice through of real heavy / prod example of a vue app, but appreciate that's not training content as such.

[@zenmasterfu]

To see the loading message in action, use the --delay [time in ms] option when starting the json server. I use 200 ms.

[@nyambe]

I clicked the link and bought the course even if I have already seen the series. I am very thankful for this info. I also got a course on D3. thanks again

[@NetNinja]

Thanks so much, I really appreciate it :)

[@jakemaughan3818]

Your a saint! Would love to see a MEVN stack tutorial from you!

[@canklc5772]

Thanks to Shaun, I scored my first official developer position ❤

[@NetNinja]

That's awesome! :) congrats!!

[@canklc5772]

@@NetNinja 🙏🙏thank you Sir

[@johncardozo]

I watched the whole 12 videos in the series and I think they're awesome. I will buy your Udemy course for sure. Thanks for such a very well explained material. I just have a question: wouldn't be better to call load function inside onMounted function than calling it inside setup function? What would be the difference? Thanks again

[@chideraugo6878]

remember that the setup hook runs before any other hook in component life cycle so calling getPosts in setup is going to be even faster (although just by a bit) than calling it inside onMounted

[@johncardozo]

@@chideraugo6878 thank you 👍🏼

[@santosgabrieldario]

const posts = ref([ { title: "welcome to the blog", body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in imperdiet nisi. Vestibulum eu dui dictum, ornare est non, dignissim dui. Donec at ex nulla. Aenean sem tortor, bibendum ac accumsan vel, elementum vel turpis. Nam auctor egestas pulvinar. Aenean placerat finibus finibus. Praesent dictum velit at purus aliquam, sit amet mattis est molestie. Duis a nulla et mauris luctus feugiat nec cursus odio. Nam elementum vitae est eu porttitor. Nulla vestibulum gravida magna eu ultricies. Nunc posuere tincidunt pellentesque. Sed id condimentum nisl, ultricies viverra orci. Fusce sit amet massa ut nibh feugiat elementum ac id est.", id: 1, }, { title: "top 5 CSS tips", body: "lorem ipsum", id: 2 }, ]);

[@laraibanwar1618]

Lauda lahsan

[@lobobogard9236]

I was looking many tutorials about composition api but in all the tutorial explain the same and the same for me was not sense for why to use but here I found "Reusable composable functions" for me is the key for why exist composition api to much thnx for this tutorial from mexico

[@NolanNonprivate]

Thanks for this great course! Had fun learning it.

[@NetNinja]

Great to hear! :) thanks for watching

[@GirishBisane-d4f]

Just cleared all my concept. Thank you making me fall in love with vue.js

[@NetNinja]

Glad I could help!

[@94praneeth]

Awesome lecture. Just finished watching it. And occasionally will watch here and there to fill some gaps in my memory. :P Anyway; love the videos. Stumbled upon your 2 years old lesson accidentally on a friend's hard disk. Watched here and there and didn't meant to copy those to my laptop. Bored with only doing server stuff wanted to learn some JS. So copied it! And BAM...! Now i know some Vue3 too. Finally, I'm grateful that i blindly copied your JS tutorial (there were many folders). Because now i know a great teacher to follow. Thank You. Live Long and Prosper!

[@abdulkadirguven1173]

At 16:00 you should install "json-server" globally by "-g" option.

[@rizadwiandhika9253]

actually you don't need that.. you can just stick install it locally ("npm install --save-dev json-server"), then add another scripts in the package.json file to execute `json-server` command. e.g (in my package.json): { // ... "scripts": { // ... "simulateApi": "json-server --watch data/db.json" } } and then run: "npm run simulateApi"

[@jasonjjavier6693]

One thing that I've noticed is if you use v-show it will go to OnUpdated function. V-if stops the render but v-show will just hide the element but still render so, that's why it was updated.

[@nyambe]

I am finally making sense of the composition API. I was thinking... what is the big deal? this is hugeeee

[@kelvin513]

Thanks for the explanation! The Vue Composable is literally a clone of React Hook concept

[@aaravbatra4991]

Hi Shaun, a quick question. May be I am overlooking something. I am looking at your repos on the github and trying to find out some code for instance this tutorial. I see every thing on the repo is a lesson number. Is there a way to link the KZbin Tutorial with github folder names? Thanks

[@ataraxia0420]

I don't have the luxury to buy the course, I know the course is not that much for its price but I'm pretty much broke right now. I just wanted to ask what I'm still missing after following up to this 11th tutorial so I can try to learn it myself.

[@wasmithee]

Saun, Great stuff!! Just a recommendation: at 24:28 Perhaps it would be better to only show the "Loading..." string _only_ when there isn't an error: ``` Home {{ error }} Loading... ```

[@alsiyonealternate]

I have a question, does the Chrome Vue extension work with the composition API? What about Vuex, is mapSetters etc working with composition API?

[@push2me936]

thanks a lot Jonin Shaun! I'll see you on udemy! Best regards your Chunin Andreas

[@ayabo1192]

Hello, thank you very much for this course! In 14:47 , you recommend checking out one of the last videos in the last chapter of this course to get familiarized with the basics of async and await. However, this seems to be the last video of the course on youtube, is there another video I'm unaware of, where I can find that topic? Thank you in advance!

[@krisosei8079]

Good job bro👍👍

[@Viralplace]

you don't say that can put the attribute setup inside the tag

[@samuelnmeje]

Are composable not the same thing as mixins ????

[@easycodingwithbg4731]

Hi Bro, how r u ? hope u r all right! Well bro , you posted the last video of vue js about the composition Api, but there is an issue with me on that video, when i start implementing the code from the video in vs code it shows me nothing on the web browser and also in the setup function the props are also not working ,, please give me solution about this, i'm just trying it for the last two weeks

[@jacklong2182]

VERY GOOD! THANK YOU!

[@ccaiuss]

The best of the best !

[@Devilman91]

Hi Shaun, thanks for valuable material. I just want to ask you about this chapter. Is not a better idea to fetch data by onMounted lifecycle hook instead in setup? Can you explain difference?

[@JediofPool]

In the middle of this I all of a sudden starting get CORS errors. I've previously bypassed them in FF. I can't seem to find a solution. I was 20 minutes from finishing these demos! Any help? I'm on a Mac.

[@angelosarnaoutis6391]

Search for a CORS extension.

[@东风西渐]

Open the client with"localhost:8080", DO NOT use the "x.x.x.x:8080"

[@AmmarAlmuain]

when u stat to write const load why u use this way i mean why don't you just use fetch or axios? or its even currect to do like this?

[@derekbressler9154]

vue is the best

[@fun3s]

Hi Ninja, been following your tutorial to get started into Vue, great stuff! Quick question, I've implemented the logic you show in the video in a small project of mine, for querying data (composable file etc.). The question is, how would I write the statement in order to use the same composable function to query a different data set, in the same vue file? Lets say I want to retrieve another dataset after an onClick event. Again, great stuff and many thanks for your content

[@fun3s]

Hi, I managed to solve my issue, and thought that I should also post the response here, for someone else to potentially benefit from it. You created getPost = (id) => { etc. I moved the argument to the load function as below: const load = async(id) => { etc. and now I can call the load function with different arguments in an event handler. Thanks again for your content Ninja!

[@seppeclijsters6433]

Thank you soo much!!

[@69leostereo]

more awesome material ...

[@sathvikmalgikar2842]

Jai Net Ninja.

[@alexandrepellegrino2699]

great, waiting for vuex, sensei.

[@venkychowdary]

did u tried to learned vuex any where??any good source u found??

[@alexandrepellegrino2699]

@@venkychowdary nope

[@reinoutko]

The last bit with the reusable code is a little complicated

[@adriatic123]

The part about Reusable Composable Functions (25:20) describes the unnecessarily complicated process. The solution could be done simpler and simplicity in coding is always the preferred way. We could mimic the Angular separation of concern principle, where we put code in service files, code that is responsible for communication with the server and obtaining data, and simply import those files into components where needed. Data should be fetched directly in the service file and only imported as data where needed, no need for executing load() function inside setup() in Home.vue component. The described way is not the best way of doing this

[@pb9405]

I disagree, importing functionality only is the most intuitive and expected behavior. If you want to cache the loaded data as you described, you could do so using a store. With a system such as service files you have components which have both data and functionality

[@manu144x]

I'm still not convinced the composition api is worth the complexities vs the options api and just using mixins properly.

[@yifanwang894]

Celebrate the achievement

[@vannhatnguyen498]

i don't see to show detail post ?

[@vannhatnguyen498]

i'm code follow you, but show detail post not working, because missing .

[@asheaven1st]

​@@vannhatnguyen498, You must: import {router-link} from 'vue-router'

[@derekbressler9154]

vue is the best!

[@hassaniqbal6199]

agree

[@derekbressler9154]

agree

[@LKS25]

How ends your voice? after talk like that.. thanks its amazing your work.

[@ivan33776]

Just of curiosity, why did you decide to fetch individual post by ID instead of passing whole post through the props?

[@angelosarnaoutis6391]

It is not a parent-child relationship, it is a different route. So to do what you say, you should pass every single attribute in the route. Something like that /posts/:id/:title/:body/:tags

[@ivan33776]

@@angelosarnaoutis6391 maybe I wasn't clear) to show post preview you have to fetch all posts. If you can pass a post ID (string) as a parameter into the router view, why can't you pass whole post (object) and deconstruct it there instead of fetching again? In case of high load system it will save a lot by not making requests for individual posts.

[@angelosarnaoutis6391]

​@@ivan33776 This route's path is "posts/:id", so he can pass only id as a route parameter. If you want to pass the whole object using route parameter, the best thing I can think is to encode it with base64 and send it as a single route parameter.

[@ivan33776]

@@angelosarnaoutis6391 watched that part again) now I see what you meant. My mistake)

[@angelosarnaoutis6391]

@@ivan33776 Glad that i have helped.

[@ridl27]

ty.

[@christophervradis7285]

Having load inside getPosts makes no sense for me, why dont we just make getPosts async and do the functionality as intended on the data in there?

[@christophervradis7285]

then you can just invoke getPosts - retrieve the return result (posts) by destructuring with all the data already there, no need to invoke load on the same data you destructure

[@janmichaelbesinga3867]

The moment I found Net Ninja, I became a net ninja disciple.

[@danielwarzecha2007]

p.s. in your free youtube videos, you don't talk about async or await for us to watch previously

[@usmanmughal5916]

So now no more vue projects?

[@NetNinja]

Probably will be in the future.

[@bekchanovbotir2474]

subtitles?

[@DaveStewartLondon]

This is great. I'm an experienced Vue dev wanting to get up to speed on Vue 3 quickly, and this covers everything I would have covered if I was going through the docs myself. Thanks!

[@pranav-kale]

Gr8🔥... Was waiting for the vid

[@jarednartates3571]

I don't usually comment, but these vue 3 videos are very good and very helpful! thank you shaun! :D

[@dennisbarnaja4173]

Appreciate your tutorials and effort. God bless you!

[@jakubzomerfeld2159]

Great attitude and perfect style of explaining everything from global info towards details. :) already bought Your 2nd course. Worth the money. Thank You! Keep doing Your great job!

[@reinoutko]

At the very end of the video, I can navigate to the new page with the id and it shows up in the page, however I still get an error in the console: Uncaught (in promise) TypeError: load is not a function at setup (Details.vue?b14c:28:1)

[@asheaven1st]

It is because you do not have a 'load()' function on your imported composable

[@usmanmughal5916]

The Great Ninja

[@TheBrownBox]

you're amazing!!! Thank you so much!

[@JamesMorgan2]

Hi Shaun, If you've already pulled down the posts data, would it not make more sense just to pass those values to the details page rather than going and fetching the data again once the link is clicked? I understand you're using it for an example, but what would the best practice be? I guess one is faster, the other guarantees the latest data?

[@mikloskontra1981]

The best course on vue I ve seen so far!!

[@NetNinja]

That means a lot, thanks! :)

[@akires47]

Excellent tutorial so far, just a comment in 25:10 if you want to check the loading messsage, you can use 3G speed on the network tab and that force the API (json server) to be slower enought to see the message.

[@danielwarzecha2007]

gosh it'd be awesome if for each video you would tag which 'lesson' it corresponded to on github

[@srajeshtuladhar4971]

Just curious if there is a github repo to this? The one in the description is fo the Udemy course I think using Vue and Firebase

[@Mersal-uj5nh]

I think mixin is what your saying as compoubles.

[@Gandobilis]

[@_isaac_muniz_]

Very cool series. Thank you veery much :))))

[@iamcookbook]

Love your videos. Very clean explanation.

[@gunnarkieck2063]

Thank you. Amazing explanation!

[@fredpourlesintimes]

A lot of things to explore :)

[@adadaprout]

I don't understand how the load() function, defined in getPost as an asynchronous function, doesn't need to be called like this: "await load()" (and thus the setup() needing to be async). Could you kindly explain ?

[@esutana]

load is async means that the execution of load() would not block the programming flow. actually it returns a object Promise and continue coding in setup() to return the object for vue setup. You don't need to await it because it updates the values of "refs" and such update will trigger the component update.

[@farnaamsamadi5386]

Thank you Sir. It was a great series.

[@nobigdealllll]

Hi Shaun, great video as always. However, I just wonder the examples would mean so many reads from the database. Would there be alternative in Vue 3 like Vuex in Vue 2 you demonstrated, that array of data can be put into "states" like posts for future use?

[@nyambe]

You sure can, however with the composition API, you might be able to bundle all the logic together and the pass values via component and return then with emit. Its a great way to keep track of values. An alternative to vuex

[@issaissifou4959]

Thank you so much!

[@OsamaMaher]

great effort, thanks

[@NetNinja]

Thanks for watching Osama!

[@butbutmybutt]

would you also use composables for bussiness logic or are composables only for components?