Learning The Basics Of Vue 3

After spending countless amounts of hours working with React.js, I think I can finally say that I’m comfortable with the framework. What’s the best thing to do when you’re comfortable? Do something that makes you uncomfortable. Therefore, I’ve decided to take on the task of learning a new framework. The question is Angular or Vue? I chose Vue for two reasons:

1. Vue is super fast and lightweight
2. Open Source

I understand that having a framework being backed up by a large company like Google or Facebook is usually going to pump out a better product. But honestly the way that Vue works, it’s more than fine, and then fact that it’s just a bunch of dedicated developers maintaining and building it makes me just want to try it.

So, let’s get to the good stuff, I decided to learn Vue 3, which is the newest version of Vue and still has a bunch of kinks, but knowing that this will probably be used in the future, it just makes sense to just get right into it.

First things first, Creating a new application. You need to download the Vue-Cli tool. After you have that set up you can go ahead and run

vue create your-app-name

This will prompt you to make a few selections ( which is super cool. ) You can set up your Vue app to use Typescript right off the gate by choosing that under custom settings, or even Vue router if you’re planning on building a site with multiple destinations. If you don’t know what you’re doing you can just go ahead and select default and create your App. ( if you are following along with this article choose the Vue3 option. )

Once you have the app created you can run

npm run serve

to start up the local server.

You will also have to download an extension ( for VsCode it’s called ‘Vetur’ ) this will make it so that your code editor will be able to understand what .vue files are.

Each Vue file will structurally look the same, you will have your <template> section your <script> section and your <style> section. This a little bit difficult to get used if you’ve only really worked with React. But the thing is, this looks like some solid HTML & Js programming so it shouldn’t be super scary.

An example of this structure can be seen here:

This is the <App> component that will housing all of our components. Let’s take a look at more robust Component to give you a better idea on what Vue can do, and we can compare some similarities with React.

In the picture above I have a side-by-side of a Vue3 component and a React component. Right off the bat the structures look a bit different. Aka the HTML in Vue3 is above the script. When creating your script you must return everything you want to use within your HTML. Where as in React it all just commingles together, and you return the HTML from the component. Furthermore, in Vue3 they’ve released a new way to structure your script, where previously you had to define your data, methods, and other stuff that I’m not familiar with. Simply using ```setup``` will give you the freedom to define what you want, where you want rather than having to separate concerns. In a smaller component, it makes sense to use the old structure. But as your components begin to grow in size, being able to move data, and functions to more logical places just makes more sense.

Furthermore, to give the HTML an event listener in Vue3 you can do it in 2 different ways. you can either use:

@click='function'
//or
v-on:click='function'

Also, note that instead of using single braces you are simply wrapping the function with quotation marks.

The last thing that I would like to touch on is that you want to show state within your HTML you’ll want to wrap it in double braces as opposed to the just single braces.

I’ll wrap it up here. With the more I learn the more I’ll write, I promise. In the next article I’ll be looking into rendering multiple items from a fetch request, as well as lifecycle methods. Thank you!