Using vue-cli and axios in Vue.js 2

Background

In this article, we will separate the front-end code into it's own separate front-end app that uses Vue.js 2 and Vue.js axios library to make AJAX calls to fetch all the articles from Rails 5.1 API back-end app.

Create a Front-end App

The vue-cli is a simple CLI for scaffolding Vue.js projects. Let's install the vue-cli:

npm install -g vue-cli

We can now create a basic front-end app structure by using the webpack-simple template.

npm init webpack-simple blov

The front-end project name is blov. This will prompt you for a few things that can answer in the command line. You can then go into this directory and run:

npm install

Install axios Library

We can install axios for making AJAX calls.

npm install axios --save

This installs the axios library. You will use --save option when you want to save a package dependency for distribution.

Quick Tour of Directory Structure

The generated index.html looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>blov</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

The package.json contains the values you provide when you create the project:

{
    name: "blov",
    description: "Front-end for Rails API back-end",
    version: "1.0.0",
    author: "Bala Paranj",
    private: true,
    scripts: {
        dev: "cross-env NODE_ENV=development webpack-dev-server --open --hot",
        build: "cross-env NODE_ENV=production webpack --progress --hide-modules"
    },
    dependencies: {
        axios: "^0.16.1",
        vue: "^2.2.1"
    },
    devDependencies: {
        babel - core: "^6.0.0",
        babel - loader: "^6.0.0",
        babel - preset - latest: "^6.0.0",
        cross - env: "^3.0.0",
        css - loader: "^0.25.0",
        file - loader: "^0.9.0",
        vue - loader: "^11.1.4",
        vue - template - compiler: "^2.2.1",
        webpack: "^2.2.0",
        webpack - dev - server: "^2.2.0"
    }
}

You can see the development only dependencies as well as development & production dependencies. The App.vue component will now contain the code to display the articles in a table.

<template>
  <div id="app">
    <h1>My Blog</h1> 

    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>Title</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="article in articles">
          <td>{{article.id}}</td>
          <td>{{article.title}}</td>
        </tr>
      </tbody>
    </table>  
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'app',
    data: function () {
      return {
        articles: []
      }
    },
    methods: {
      fetchArticles: function () {
        axios.get('http://localhost:3000/articles').then((response) => {
          this.articles = response.data
        }, (error) => {
          console.log(error)
        })
      }
    },
    mounted: function () {
      this.fetchArticles()
    }
  }
</script>


<style>
  body {
    background-color: #444444;
    font-family: Verdana, Helvetica, Arial;
    font-size: 14px;
  }
  a img {
    border: none;
  }
  a {
    color: #0000FF;
  }
  .clear {
    clear: both;
    height: 0;
    overflow: hidden;
  }
  #app {
    width: 75%;
    margin: 0 auto;
    background-color: #FFF;
    padding: 20px 40px;
    border: solid 1px black;
    margin-top: 20px;
    position: relative;
  }
  #flash_notice, #flash_error, #flash_alert {
    padding: 5px 8px;
    margin: 10px 0;
    margin-right: 150px;
  }
  #flash_notice {
    background-color: #CFC;
    border: solid 1px #6C6;
  }
  #flash_error, #flash_alert {
    background-color: #FCC;
    border: solid 1px #C66;
  }
  .field_with_errors {
    display: inline;
  }
  .error_messages {
    width: 400px;
    border: 2px solid #CF0000;
    padding: 0px;
    padding-bottom: 12px;
    margin-bottom: 20px;
    background-color: #f0f0f0;
    font-size: 12px;
  }
  .error_messages h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 10px;
    font-size: 12px;
    margin: 0;
    background-color: #c00;
    color: #fff;
  }
  .error_messages p {
    margin: 8px 10px;
  }
  form .field, form .actions {
    margin: 12px 0;
  }
  h4 {
    margin-bottom: 5px;
  }
  table {
      border-collapse: collapse;
      width: 100%;
  }
  th, td {
      text-align: left;
      padding: 8px;
  }
  tr:nth-child(even){background-color: #f2f2f2}
  th {
      background-color: #4CAF50;
      color: white;
  }
</style>

The axios libary makes the AJAX call to the Rails 5.1 server and renders the JSON data returned by the server in the browser at http://localhost:8080. You can run the webpack server by:

npm run dev

The main.js:

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

makes this possible by importing the App component and rendering the html generated by this component in the div with id app. You can download the source code for this article from blov.

References


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.