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

[@sathvikmalgikar2842]

this entire series is extremely intuitive to follow

[@izzatullokanoatov370]

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

[@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!

[@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.

[@BullWinkleBull]

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

[@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

[@pyplacca]

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

[@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 :)

[@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!

[@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!

[@mikloskontra1981]

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

[@NetNinja]

That means a lot, thanks! :)

[@jarednartates3571]

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

[@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 :)

[@pranav-kale]

Gr8🔥... Was waiting for the vid

[@GirishBisane-d4f]

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

[@NetNinja]

Glad I could help!

[@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.

[@dennisbarnaja4173]

Appreciate your tutorials and effort. God bless you!

[@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!

[@jakemaughan3818]

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

[@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

[@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.

[@usmanmughal5916]

The Great Ninja

[@NolanNonprivate]

Thanks for this great course! Had fun learning it.

[@NetNinja]

Great to hear! :) thanks for watching

[@canklc5772]

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

[@NetNinja]

That's awesome! :) congrats!!

[@canklc5772]

@@NetNinja 🙏🙏thank you Sir

[@iamcookbook]

Love your videos. Very clean explanation.

[@zenmasterfu]

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

[@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

[@johncardozo]

@Chidera Ugo thank you 👍🏼

[@nyambe]

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

[@push2me936]

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

[@ccaiuss]

The best of the best !

[@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"

[@krisosei8079]

Good job bro👍👍

[@farnaamsamadi5386]

Thank you Sir. It was a great series.

[@_isaac_muniz_]

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

[@TheBrownBox]

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

[@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!

[@gunnarkieck2063]

Thank you. Amazing explanation!

[@kelvin513]

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

[@fredpourlesintimes]

A lot of things to explore :)

[@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... ```

[@jacklong2182]

VERY GOOD! THANK YOU!

[@69leostereo]

more awesome material ...

[@issaissifou4959]

Thank you so much!

[@erikseferi2241]

Hello thankyou for your good explanation. While i was working on this tutorial with the Dojo Blog, at the Create.vue file you had the version of handleKeydown event like this --- const handleKeydown = () => { if (!tags.value.includes(tag.value)) { tag.value = tag.value.replace(/\s/g,'') // remove all whitespaces tags.value.push(tag.value) } tag.value = '' } ---- which will move all the spaces so if you have " web dev " it will replace it to be "webdev" and you are checking if it includes before updating it which if i put another webdev with 4 spaces after it will still add to the array of tags. my suggestion would be to make it like this: "const handleKeydown = () => { const trimmedTag = tag.value.trim() if (!tags.value.includes(trimmedTag)) { tags.value.push(trimmedTag) } tag.value = '' }" insted of moving all whitespaces to trim it and check if tags includes the trimmedTag. Your videos are so amazing that are even improving my logic to find better solutions. Big thankyou :D

[@batra.vivek80]

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

[@OsamaMaher]

great effort, thanks

[@NetNinja]

Thanks for watching Osama!

[@seppeclijsters6433]

Thank you soo much!!

[@renanmalato]

why fetch single post if all posts were already loaded in the posts page? shouldnt be just pass the post object? is it about performance? im curious

[@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?

[@alexandrepellegrino2699]

great, waiting for vuex, sensei.

[@venkychowdary]

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

[@alexandrepellegrino2699]

@@venkychowdary nope

[@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

[@derekbressler9154]

vue is the best

[@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.

[@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?

[@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?

[@derekbressler9154]

vue is the best!

[@hassaniqbal6199]

agree

[@derekbressler9154]

agree

[@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"

[@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

[@samuelnmeje]

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

[@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!

[@sathvikmalgikar2842]

Jai Net Ninja.

[@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.

[@sheraizaTV]

so, what is the purpose now of the mixin?

[@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

[@Viralplace]

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

[@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

[@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

[@peterinvestor]

why componenet updated was not ran when we toggle posts? showPosts data is changed from TRUE to FALSE so data is updated and also showPosts is reactive variable?

[@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.

[@janmichaelbesinga3867]

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

[@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.

[@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

[@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?

[@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'

[@yifanwang894]

Celebrate the achievement

[@reinoutko]

The last bit with the reusable code is a little complicated

[@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

[@ridl27]

ty.

[@danielwarzecha2007]

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

[@usmanmughal5916]

So now no more vue projects?

[@NetNinja]

Probably will be in the future.

[@Mersal-uj5nh]

I think mixin is what your saying as compoubles.

[@manu144x]

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

[@Gandobilis]

[@LKS25]

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

[@bekchanovbotir2474]

subtitles?

[@danielwarzecha2007]

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