Vue 3 is almost here , the hype is real

#javascript #vue #frontend #react

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)

Adrian Samuel • Sep 3 '20

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

Jouini Hamza • Sep 3 '20

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

Adrian Samuel • Sep 7 '20 • Edited

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>
  );
};