Introduction to Vue3 - Building a Stop Watch Timer (with Composition API)

🤖 SaaS I'm Building: www.icongenera...
💬 Discord: / discord
🔔 Newsletter: newsletter.web...
📁 GitHub: github.com/web...
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody

[@darialyphia]

Also if you want to conditionally render multiple elements, but don't want to wrap them in a div, you can wrap them in a and add the v-if to it ! (this also works with v-for). It's really helpful

[@WebDevCody]

Nice so it’s like fragments kind of

[@gearmaxim]

I really enjoy working with vue, thanks for the video!

[@oumardicko5593]

You can use objects with ref, when on property of you object changes, it will re-render. Unlike in react you don't need to create a new object using restructuring

[@karlstenator]

This is perfect timing! I'm both learning Vue 3 and building a hobby timing project for my running club. Most excellent. 🏆

[@hsider]

Pretty good demo of VueJs 👌 I would disable the buttons instead of hiding them. I've used Vuejs since it came out and still using it for most of my projects, the separation of JS and HTML made sense to me since I designed a lot of web pages in HTML and CSS so Vuejs makes it easy to add interactivity to those HTML templates without headache.

[@chrisbolson]

I have recently been learning React and Vue (or Anglular) was next on my list. This is the first video I have watched regarding View and, having seen your brief intro, I now I wish I had started with Fue before React - it looks so much simpler and closer to Vanilla JavaScript. I look forward to seeing more. Thanks!!

[@WebDevCody]

It is much simpler in some aspects.

[@tobychidi]

Green light looks cool

[@marcoss4563]

nice! ty!

[@kylebaker8548]

first lol keep up the great content cody!

[@SeibertSwirl]

Lmaoooooooo ughhhh I woke up late!!! I will be first once again

[@agcodes]

what I learnt, green light = vue blue = react 😂

[@shakapaker]

pnpm v8 🥰

[@hanes2]

I'm using vue which is nice, trying out Nuxt.

[@bughlinjo9372]

hello cody i just started learning react and i have a question. i have header and nav in seperate files and i want to import increment function in header. i can,t seem to do it. can you help me?

[@WebDevCody]

Where is your increment function declared? You probably need to put the increment function in a separate file and export it. Then any vue components could use it. Your increment file would also have a count ref which other components could import

[@bughlinjo9372]

@@WebDevCody i use react/vite and i declared increment function with useState in a seperate file and exported it than i used it onclick={} on button and than i need to use {count} in a seperate file for number to go up but when i use {count } it says word cannot be found.

[@rajusharma823]

pass it as props. join the discord people may help you there. :)

[@bughlinjo9372]

@@rajusharma823 oh than i have to learn that thanks

[@rookie549]

@@bughlinjo9372 React Context

[@damjandjordjevic1994]

What would happen if state wasn't a ref? I get confused when I should use a ref and when I shouldn't...

[@WebDevCody]

with composition api, you use ref when you need dynamic state. If you just have a constant you could just declare a normal const variable at the top of the script

[@OlegSim-b3g]

vue content 👍

[@oumardicko5593]

You could have used a computed value that will update the text depending on the state. And on single function which will do an action depending on the state too 🤔. We would have violated the single responsibility principle but it works

[@WebDevCody]

Oh so you mean use a watch that listens for the timer state and run different code depending on the new value? Yeah a computed would help cache the timer output, but with this small scale of app I don’t think it would really make a difference

[@oumardicko5593]

@@WebDevCody you have quite a few ways to do this

[@piotrm98]

I have a question, I did same app in React yesterday and i have a problem that when you switch to a different tab in your browser then your stopwatch stops. I read that its an optimization thing that browser does. Do you know how to get around this?

[@WebDevCody]

You’d need to store a timestamp when you click start, then calculate the diff between the start and now, then display the diff formatted

[@gregconen]

Really, you should do that anyway; if you just use setInterval, you can lose time even in an active tab if the browser is busy with something else. But the timing mechanism is not the point of the video.

[@adrianfr05]

Next svelte 👀

[@mrkanata7696]

good video. What is your vscode theme ?

[@WebDevCody]

bearded theme stained blue

[@mrkanata7696]

@@WebDevCody thx bro :)

[@kakun7238]

what about nuxt

[@WebDevCody]

yeah I'll probably use that with v3 app soon as well

[@lebroncarmelo1523]

In my opinion vue has gradually declined

[@WebDevCody]

How so

[@darialyphia]

npm i @vueuse/core import { useIntervalFn } from '@vueuse/core' vueuse ie too goated 😄