Vue User Manager - Step 1

This series of tutorials is best suited for someone who has already dabbled with Vue, but maybe not yet built a complete app. I won't dig deep into all the fundamental concepts, instead I'll focus primarily some of the things that can trip you up as you are learning Vue. If you've never worked with Vue before, then I suggest you watch this excellent free course to help you get started. You should also be comfortable with ES6 Syntax.

Create a folder for this project and then create these three files within the folder:

index.html
main.js
main.css

Then add this code to main.css (this is very minimal CSS - the app we create won't win any design awards!):

form label, input{
    display:block;
}

form input[type=submit], input[type=button]{
    display: inline;
}

form .validation{
    color: red;
}

Add this code to index.html:

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Vue Sample App</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    
    <!-- The Vue app will get 'mounted' into this div -->
    <div id="app"></div>

    <!-- imports the Vue library -->
    <script src="https://unpkg.com/vue@next"></script>
    <!-- Make sure to include Vue before main.js  -->
    <script src="main.js"></script>
</body>
</html>

A few notes about the HTML code above:

We link to the stylesheet (main.css)
We have a div that will act as the container for our Vue app
We import the Vue framework
We import the main.js file (this code should come after Vue has been imported)

Now put this code into main.js:

var userData = [
    {id:1, firstName:"Jane", lastName:"Doe", email:"jdoe@acme.com"},
    {id:2, firstName:"Tony", lastName:"Thompsom", email:"tony@acme.com"},
    {id:3, firstName:"Jesse", lastName:"Jones", email:"jesse@acme.com"}
];

const rootComponent = {
    template:   `<div>
                    <h1>User Manager</h1>
                    <p>Number of users: {{users.length}}</p>
                    <br>
                    <button @click="addUser">Add User</button>
                    <!--We'll add a few Vue components here later-->
                </div>`,
    data(){
        return {
            users: userData
        }
    },
    methods:{
        addUser(){
            alert("TODO: Add User");
        }
    }
};

const app = Vue.createApp(rootComponent);

// We'll define a few more Vue components here in the next step

app.mount('#app');

This JavaScript code declares an array of 'user' objects, which will be the data that our app works with. Then it creates a Vue component (which is assigned to the rootComponent variable). For now, the template of the component simply displays how many user object are in the array, and a button that will eventually allow you to add new users to the array.

After defining the rootComponent, the last two lines of code create a Vue app and mount it to the DIV element in our HTML page.

Go ahead and open the HTML page in the browser to launch the app, it's nothing special but it will get us started. In the next step, we'll create a component that displays a list of all the user objects.