DEV Community 👩‍💻👨‍💻

Cover image for Vue 3 is almost here , the hype is real
Jouini Hamza
Jouini Hamza

Posted on

Vue 3 is almost here , the hype is real

i don't know about you , but i am excited to start developing project with vue 3 which almost here ( currently in RC ) , it has so many features added and many changes

i am not a big fan of JSX so vue is the best fit for me ( that doesn't mean you can't use JSX in vue , you totally can ) and i think the new composition API will attract more React devs and not to mention the introduction of vite

i am proud to be a part of vue's community and the JS community in general this healthy competition between modules , framework and libs pushes each one of them to be better and inspire others

Top comments (5)

Collapse
 
adriansamuel profile image
Adrian Samuel

I've only heard of good things about Vue but remain a little unconvinced about the need to switch over from Vue to React.

What would your top reasons be? And what will Vue 3 add that will attract React Devs?

I feel like Svelte might be something I would try in future due to its simpler API

Collapse
 
sihamza profile image
Jouini Hamza

for me , i don't like JSX it's messy so the structure of vue componet is the best fit for me the template , the logic and the styling are seperated but in the same file , you have two-way binding , template directives , you don't have to configure any css preprocessor ( and you can use diffrent styling language in the same project ) , using libs plugins let's say vuetify ( material-ui of vue ) for example you don't have to import every thing you use you just add the vuetify components to your component without importing any thing , the lifecycle and the api are amazing ( they will add the new composition api which will intredouce hooks ) more ...

Collapse
 
adriansamuel profile image
Adrian Samuel • Edited on

I find that SX looks just like HTML with some slight differences. I don't see it really differs from the template section of single file vue components?

So with Vue you don't have your logic in the same page as your templating? Why would that be advantageous? With React depending on what you do, it can be optional. Some things have to be in the component, some things don't i.e. reducers

Styling being seperated is really up to you with React.

You can use CSS, or any other styling directives that you prefer, so you can have single file components with styled components

Also I don't think importing syntax is a bad thing. It makes it clear to others in your project to know quickly and clearly which is native HTML and which is from a library. Most IDEs autocomplete import so it doesn't add any extra pain.

Sorry for all these points/questions. I would love for us to build a component that doesn't something small and simple and compare the pros and cons of both.

Here is a simple version of mine in React with Hooks. Could you build yours with modern Vue and show me how that work?

import React, {useState} from "react"

/* component that increments the value  of a number displayed in a p tag using onClick event listener  attached to button */
const CountComponent = ({initialCount}) => {

const [count, setCount] = useState(initialCount)

const handleClick = () => setCount(currentCount => currentCount + 1)

  return (
    <div>
      <p> My count is {count} </p>
      <button onClick={handleClick} > Increment Count </button>
    </div>
  );
};

// Using count component in another component
const MainComponent = () => {
  return (
    <main>
      <CountComponent initialCount={0} />
      <CountComponent initialCount={1} />
      <CountComponent initialCount={2} />)
    </main>
  );
};

// or using javascript map function to declaratively add list of components

const MainComponent = () => {
  return (
    <main>
      {[0, 1, 2].map((initialCount, index) => (
        <CountComponent key={index} initialCount={initialCount} />
      ))}
    </main>
  );
};

Collapse
 
zubairmohsin33 profile image
Zubair Mohsin

Typo in: (that doesn't mean you can use JSX in vue , you totally can )

first can should be can't.

Collapse
 
sihamza profile image
Jouini Hamza

yes thanks

Become a Moderator Do you want us to help make DEV a better place?

Fill out this survey and help us by becoming a tag moderator here at DEV.