What a Vue! (A Quick intro into Vue.js)

As I was looking for a hackathon to sign up for I stumbled across Vue.js. Its a JavaScript Framework similar to React/Angular. At first I thought, great, another framework to learn. But I gave it a chance and saw the beauty in its simplicity.

As someone who primarily uses React, I will making a lot of comparisons to Vue based on how I would do things in React.

Components

Vue is built upon components, similarly to React, at least concept wise.

Lets start with App.js… i mean App.vue

the starting default App.vue

On a closer look at the code, notice 3 main sections. template, script, and style.

In vue, the HTML, Javascript, and CSS for the component, all live in that components file.

Lets break down the Template and the Script sections.

<template>

This is where the HTML lives. In the template section we have:

If this were a React component, this would be equivalent to what goes in the return ()

// in react world
function App(){
   return (
      <div id="app">
         <img alt="Vue logo" src="./assets/logo.png">
         <HelloWorld msg="Welcome to Your Vue.js App" />
      </div>
   )
}
// note HelloWorld is a component. More on that below

Just like in React, you can only have one outer HTML element inside the <template></template> tags. But you can however, have a bunch of nested elements inside it.

Let’s also take a look at the HelloWorld Component. It has a msg attribute. This attribute will be passed along as props to the HelloWorld component.

<script>

This is where the Javascript lives. In the App.vue we have:

Notice on line 9 we import the HelloWorld component in a very similar way to how we import components in React.

Line 11 is where things gets a little different. Line 12 is the name of the component. Line 13 is the components being used within this component. Also included in the export would be any props being used or functions. (More on this later)

<style>

Inside style is all the CSS for the component. These CSS styles can be used globally if the style tag does not have a scoped attribute.

style section of the App.vue

style section of the HelloWorld.vue component. note the scoped attribute on line 43

I’m kind of digging this setup. Sometimes looking for a certain line of CSS for the component I’m working on in React can be a pain. In Vue, all the CSS for the component is right there at the bottom of the component file.

Using Components

So that was a tour of the starter App.vue file. Lets take a look at the HelloWorld component that was imported.

I removed the unordered list because we don’t really need it

Inside the template tags we have:

Inside the script tags we have:

We aren’t using any components inside the template so aren’t importing a component inside the script tags.

But we do have props. msg which is a String. Feels a bit TypeScript-ish.

If you recall inside App.vue we sent msg as “Welcome to Your Vue.js App”

<HelloWorld msg="Welcome to YourVue.js App" />

In line 3 we have {{ msg }}. Similar in React where we would have { props.msg }

There are a lot of similarities that I can see to React. The main difference I’m noticing is the way the Javascript is written inside the script tags. I think I will explore a bit more. Maybe the more I play around in it the more I will have a different point of Vue. (see what i did there?)