Vue.js Tutorial 102: Create a Vue CLI App

A CodeMix eLearning Tutorial

Create a simple Vue CLI app that connects your frontend to a web service that returns a list of people in Star Wars movies.

For a hands-on learning experience, an interactive version of this tutorial is included in CodeMix.

Try it Yourself

What is CodeMix eLearning? | Discover Other Tutorials

Prefer your own development environment? Download the project, and follow along with the video or the steps below.

# Vue.js 102: Create a Vue CLI App

### 01

# Welcome to Vue.js 102!

In this tutorial, we are going to make a simple Vue.js application. In this application, you will connect your frontend to a web service that returns a list of people in Star Wars movies.

A new project `tutorial-vue102` has been added to your workspace. If you want to create your own Vue project, select `File > New > Project...` and choose `CodeMix > Vue Project`.

### 02

# Install NPM Dependencies

To work with a Vue project, you first need to install required Node modules. For this we will use the Terminal+ view.

You need to run npm install to install the corresponding Node modules needed to properly work with Vue.js inside this project, including the command needed to serve the Vue application easily from development.

1. Type `npm install`
2. Press `Enter`

The Terminal+ view in CodeMix will automatically configure the Node and NPM versions for you. If you need to change this, you can at any time via project properties.

Node and NPM installation can take up to several minutes.

### 03

# Add Axios Dependency

Axios simplifies using data services with Vue. To add it, install the dependency and save the change to package.json.

1. Execute `npm install axios --save` in Terminal+

The Terminal+ view in CodeMix will automatically configure the Node and NPM versions for you. If you need to change this, you can at any time via project properties.

### 04

# Create StarWarsPeople.vue

Let's create a new Vue component for retrieving the Star Wars people we are going to access in this tutorial.

1. Right-click on `src/components`
2. Select `New > Vue File`
3. Type `StarWarsPeople.vue` for the name

You can read more about Component basics of Vue <a href="https://vuejs.org/v2/guide/components.html" target="_blank" rel="nofollow noopener">here</a>

### 05

# Scaffold Vue

In our empty .vue file, we can use snippets in CodeMix to fill out a template configuration for Vue. The structure of Vue allows multiple elements in a single file.

1. Type `scaffold` and press Enter to fill out the Vue file

### 06

# Start the updateNames() Method

Now make a method to get the names for our component. The details will be filled in later.

```
import axios from "axios";
export default {
  name: 'StarWarsPeople',

methods: {
    updateNames() {
    }
  }
}
```

### 07

# Add a Data Structure for Result

Now let's create a data structure for the names we find.

```
data() {
  return {
    people: null
  }
},
```

### 08

# Retrieve People from Star Wars

On to creating the code needed to connect to the Web Service. Add the below snippet inside the updateNames method

```
var tempPeople = new Array();
axios.get("https://swapi.co/api/people/?format=json").then(response => {
    
});
```

### 09

# Save Retrieved Data for Local Access

Put all retrieved names into a local array so that it can be accessed from the UI.

```
for (const person of response.data.results) {
    tempPeople.push(person);
}
this.people = tempPeople;
```

### 10

# Use Snippets for Component's Template

Emmet is a powerful tool that will help you expand code, reducing the time spent typing. Type the following inside the template tag and a popup window will appear with code suggestion. If not shown, press `Ctrl+Space`.

```
div[v-if="people"]>ol>li
```

by accepting the suggested code, the result will be:

```
<div v-if="people">
    <ol>
        <li></li>
    </ol>
</div>
```

This is just a small example of what Emmet can do, <a href="https://www.genuitec.com/docs/power-ups/emmet-in-codemix/" target="_blank">see this page</a> for more.

### 11

# Continue using Snippets for Component's Template Part

Now let's add the following Vue directives within the li element:

```
v-for="person in people" :key="person.name"
```

and add the following code just before `</li>`.

```
{{person.name}}
```

Remember to use content assist, which will provide both directive suggestions and documentation too.

### 12

# Initialize Component

Now, let's load person data during component creation.

```
  created() {
    this.updateNames();
  },

```

### 13

# Prepare Component to be Used by the App

We now have our component ready to be used. To make it available for use, it needs to be imported using `import` statement and referenced on the `components:` property in the App.vue file.

```
<script>
import HelloWorld from './components/HelloWorld.vue'
import StarWarsPeople from './components/StarWarsPeople'

export default {
  name: 'app',
  components: {
    HelloWorld,
    StarWarsPeople
  }
}
</script>
```

### 14

# Use Component to Show Persons

Add the reference to the component on the App.js template section.

```
<template>
  <div id="app">
      <star-wars-people></star-wars-people>
  </div>
</template>
```

### 15

# Check out the app

Use Live Preview to see how the app looks like right now.

If you do not see the preview at the right of your editor, you can enable it by clicking the Live Preview toggle (or the eye icon) at the top right of the editor.

It will prompt to run the Angular server first, just accept the request and it will start the server and then display the preview.

Alternatively you can press `{binding:codemix.toggle.preview}` or right click on the editor and select `Toggle Live Preview`.

### 16

# Nice Job!!!

You've finished the Vue 102 tutorial. As you are learning Vue.js, why not check out <Vue.js Examples|https://vuejs.org/v2/examples/> for good examples of challenges you may face.

Explore other courses <a href="https://www.genuitec.com/elearning/" target="_blank">here</a>.