Create a Quick Prototype in Vue — Part 1

This series of tutorials will cover some of the things that can trip you up when learning Vue. It is best suited for someone who has already dabbled with Vue a bit, but maybe not yet built a complete app. I won’t dig deep into all the fundamental concepts, instead I’ll focus primarily on 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], form input[type=button]{
    display: inline;
}

form .validation{
    color: red;
}

Add this code to index.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:

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