Getting a view of Vue.js

By | March 6, 2022

View.js is one of three popular frameworks in use today. The others are react and angular. All my previous apps were done with react. I am excited to see what Vue has to offer. This short tutorial will show you how to get a Vue app up and running from scratch.

Setup

To use Vue we need to set up a few tools. We will be using VSCode for this demo. So install that on your machine using these instructions. https://code.visualstudio.com/Download

Install node.js https://nodejs.org/en/

In VSCode add extension “Live Server”.

Create a project folder in your repo location and navigate to it in VSCode.

Start a terminal session and enter the following.

npm init vue@latest

Simple App

Create three files in your project, index.html, app.js and style.css.

Paste the following in index.html. The Vue single page app will be inserted in <div id="app">, app.js contains the code to create the Vue app. The source code for the vue framework is contained in <script src = https://unpkg.com/vue@latest></script> . This will allow us to get a Vue app up quickly. We will cover the Vue CLI in another post.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="style.css"
    >
    <title>Sample Vue App</title>
  </head>
  <body>
    <div id="app">
    </div>
    <script src = https://unpkg.com/vue@latest></script>
    <script src = "app.js"></script>
  </body>
</html>

Paste the following in app.js. The method Vue.createApp creates the app with a template and some data as shown. We can use the data by putting it in our template using {{appMessage}} .

const app = Vue.createApp({
    template: '<h1>{{appMessage}}</h1>',
    data(){
        return{
            appMessage: 'First view app',
        }
    }
})

app.mount('#app')

Paste the following in style.css

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html,
  body {
    font-family: Arial, Helvetica, sans-serif;
  }
  
  #app {
    width: 400px;
    height: 100vh;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  h1,
  h3 {
    margin-bottom: 1rem;
    font-weight: normal;
  }
  
  img {
    border-radius: 50%;
    border: 5px #333 solid;
    margin-bottom: 1rem;
  }

  button {
    cursor: pointer;
    display: inline-block;
    background: steelblue;
    color: white;
    font-size: 18px;
    border: 0;
    padding: 1rem 1.5rem;
  }
  
  .blue {
    border-color: steelblue;
    background-color: steelblue;
  }
  
  .red {
    border-color: red;
    background-color: red;
  }
  
  button:focus {
    outline: none;
  }
  
  button:hover {
    transform: scale(0.98);
  }

To see the app right click the index.html file and select “Open with Live Server”. Congratulations you have created your first Vue app!

V-bind

Our simple app defined some data and used it in our template. In this example we are going bind data using the v-bind command.

First lets replace our data block in app.js with the following data.

appMessage: 'First view app presenting',
plantColor: 'Yellow',
plantType: 'Sunflower',
boarderColor: "red",
picture: 'https://www.jimmysoftllc.com/img/about/4.jpg' 

Next we will use it directly in our index.html file by replacing the “app” div with.

<div id="app">
  <h1>{{appMessage}}</h1>
  <image :class="boarderColor" v-bind:src ="picture" :alt="`${plantColor} ${plantType}`"></image>
  <h2>{{plantColor}} {{plantType}} </h1>
</div>

This will not take effect since we defined our “template” in app.js. Remove the template definition and now it will work. To see the app right click the index.html file and select “Open with Live Server”.

So lets dive into what is happening with “v-bind”. V-bind is needed for items like class and scr inside the html tag. For inner text you use {{dataItem}}. Also v-bind:class or v-bind:src can be shortened to :class and :src. Somewhat confusing at first but you will get the hang of it.

Events

Our app does not do much. We can add user interaction by adding a button and handling the event from the button click.

In you index.html add the following to add your button. Notice that the button has a new item v-on:click. This item can kick off a method in your app.js file.

<button v-on:click = "buttonPressed":class="blue">Do stuff</button>

Add the following methods to your app.js file just under the data item separated by a comma. It is called “buttonPressed” and the method will bring up a prompt screen.

const app = Vue.createApp({
    data(){
        return{
            appMessage: 'First view app presenting',
            plantColor: 'Yellow',
            plantType: 'Sunflower',
            boarderColor: "red",
            picture: 'https://www.jimmysoftllc.com/img/about/4.jpg' 
        }
    },
    methods:{
        buttonPressed(){
            prompt("button pressed")
        }
    }
})

app.mount('#app')

To see the app right click the index.html file and select “Open with Live Server”.

Make an api call to update

The above app is pretty static. We can make a few changes and call githubs cofounders Chris Wanstrath account and replace the picture and name with his.

To do this make a few changes to the index.html as follows.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="style.css"
    >
    <title>Sample Vue App</title>
  </head>
  <body>
    <div id="app">
      <h1>{{appMessage}}</h1>
      <image :class="boarderColor" v-bind:src ="picture" :alt="`${name}`"></image>
      <h2>{{name}}</h1>
      <button v-on:click = "buttonPressed":class="boarderColor">Do stuff</button>
    </div>
    <script src = https://unpkg.com/vue@latest></script>
    <script src = "app.js"></script>
  </body>
</html>

Then make changes to the app.js file as follows.

const app = Vue.createApp({
    data(){
        return{
            appMessage: 'First view app presenting',
            name: 'Sunflower',
            boarderColor: "red",
            picture: 'https://www.jimmysoftllc.com/img/about/4.jpg' 
        }
    },
    methods:{
        async buttonPressed(){
            const res = await fetch('https://api.github.com/users/defunkt')
            const data = await res.text()
            const obj = await JSON.parse(data)
            this.picture = obj.avatar_url 
            this.name = obj.name
        }
    }
})

app.mount('#app')

To see the app right click the index.html file and select “Open with Live Server”. This is the result. Pressing the button will fetch Chris Wanstrath’s profile, the cofounder of GitHub.

This short tutorial shows you the basics of Vue. Enjoy using it.

If you want all the code in this tutorial you can clone my repo at https://github.com/JimmySoftLLC/vue-tutorial