How to use the Vue 3 Composition API - Beginner VueJS 3 Tutorial

Timestamps:

0:00 - Intro

0:28 - Building a simple calculator with Vue JS refs

3:04 - Mapping values with the UI

3:27 - Mapping a Vue ref to an input field

3:39 - Using V-model

5:03 - Calculating with function addNumbers()

7:05 - Building a simple calculator with Reactive API and state

10:06 - The difference between refs and reactive

10:52 - Simplifying code with the computed function

13:11 - Simplifying state management

Grgur on Social Media:

Vue Enterprise Support:

Build Beautiful Digital Experiences with Ionic:

Digital Transformation With Amazon Web Services:

Product Kickstart - Free E-book:

Modus Create is a disruptive consulting firm that helps companies transform for success in the digital future through a unique collaborative engagement model that focuses on strategy, product design/build, user experience, company culture, and process change.

#Vue3 #CompositionAPI #JavaScript #VueJS #Vue #WebApplications #JS

[aram]

I would be curious to see a bigger application (esp. the file structure), and how you deal with modals (do you emit results as events w/data, or relay them in store? do you open/close a modal throu actions or imperatively via some .open method?) and forms - all in the most effective way.

[munapadhi]

wow Clean understanding composition api and reactive api, and fun video

[tanzimibthesam]

React Js without jsx . Interesting. Your explanation is awesome.

[yves]

Thank you so much. Clear and...funny, you saved me so much time !

[shortsoflifeofficial]

Hi,
Can you please also provide an example of how to manage state while user authentication in Vue 3 ?

[ecoseodeutschland]

Very good video, you instantly motivated me to learn v3 today! thx

[santiagoaguilar]

You’re really funny and a good explainer. Thanks for the video.

[aykxt]

Great Video! PS: Which font you are using in VSCode?

[aitohideki]

Hi Grgur.
It's announced that Vue.js itself supports SSR.
How can I set compiler settings for server side rendering?

[wernerlaude]

Nice to watch.. Would be great to have the code too, as in part 3 I have an error..computed () => ...may be something changed in between.

[shutterradio]

Cool! Thank you! Little note: I feel like it could be speed up a little bit. I usually watch youtube on normal speed, but this time switched to 1.25 (but maybe that's too much)

[baseerx]

Sir, can i get the whole vue3 code on github?

[Denisamoldrio]

Hi, I'm pretty newbie in vue. Does it works as a replacement for vuex at some point?

[RJCommunityDev]

<select
:value="value"
@change="updateValue"
v-bind="$attrs"
v-on="$listeners"
>

gives below error

error The `$listeners` is deprecated

help me in resolving

[akauppi]

It's kind of sad that there's so much joy in getting basic reactivity working. ... :)   That's a natural programming paradigm. Spreadsheets had it from the start. Somehow, us humans enjoy dealing with computers using an "assembly language" paradigm (do this - move that). Maybe it makes us feel superior, or it has to do with our tendency to micro manage, don't know. Reactivity at organisations could be the next frontier. Make it so!

[rickyj]

Dark day for Vue with this lack of direction. Great tutorial though haha

[jctapuk]

let result = computed(() => num1 + num2)

[gpalmadev]

amazing video tutorials and a fanny guy :)

[zerefdev]

apparently, vuex is gonna die with these new awesome features