How I built a web app with Vue, Vuetify and Axios

How I built a web app with Vue, Vuetify and Axios

In this article, we will be building a Vue.js Application supported by Vuetify and Axios. The aim of this article is to implement a movie application which will be calling on an API

The user will be able to search for movies. The API will retrieve movies with all the search details. When a user clicks on a movie, it will give more details of each movie. It’s a fairly simple App, but it will explain the use case of calling the API from the Vue.js App.

Contents

  1. Why Axios?
  2. Why Vuetify?
  3. A brief about the movie API
  4. Calling and testing API and Test.
  5. Create an App
  6. Requirement and structure of the App
  7. Add Vuetify to the Project
  8. Add vue-router to the project
  9. Add axios to the project
  10. Remove the currently scaffolded component
  11. Create LatestMovies component
  12. Implement Movie Component
  13. Display the ratings
  14. Add Search Movie component
  15. An issue with search movie and how we can rectify it
  16. Add a warning message if there is no search data in the API
  17. Creating a central file for axios/refactoring
  18. Wrapping Up and source code

1. Why Axios?

In Vue.js App, we can display the data from an external API. This can be done by vue-resource and axios. Axios is a 3rd part library and it is a popular one. Here is the official link for using Axios with Vue.js.

The important point to be noted here is that in the official docs there are no details about installing axios to the Vue.js app. We will cover this in Section 9: Add axios to the project.

2. Why Vuetify?

Vuetify is a material design framework built on top of Vue.js. It has nice UI components and which can be readily available to use on Vue.js.

3. A brief about the movie API

http://www.omdbapi.com/

The omdbapi is an open and free movie database API which will provide the movie details and images too. The main drawback is that most images are not very clear, but it will do the trick. Also API support is there.

In order to use this API, first of all, need to signup and they will provide an API key sent to you via mail. This can be used for each query result.

Passing key and also the special string is needed. s stands for search when passing s=”Indiana”, API will retrieve all data contains Indiana. Also, i stands for a movie with imbd id will be returned, so only one is returned since it is unique. We are using “s” and “i” here for the demo.

4. Calling and testing API and Test

In order to check what we will receive when calling the omdbapi is by testing with postman tool or any API test mechanism. Here I am using the postman for this.

As you see in the image, need to pass the apikey=XXXX and the s=”movie-name”

So the URL becomes

http://www.omdbapi.com/?s=movie-name&apikey=XXXX&page=1&type=movie&Content-Type=application/json
Awesome, we are good, now we can proceed to create an app and work on the axios as well.

5. Create an App

Create a Vue js application is done by a simple command

vue create movie-app

movie-app is our app name.

6. Requirement and structure of the App

The structure of the app have 3 components.

  1. Why Axios?
  2. Why Vuetify?
  3. A brief about the movie API
  4. Calling and testing API and Test.
  5. Create an App
  6. Requirement and structure of the App
  7. Add Vuetify to the Project
  8. Add vue-router to the project
  9. Add axios to the project
  10. Remove the currently scaffolded component
  11. Create LatestMovies component
  12. Implement Movie Component
  13. Display the ratings
  14. Add Search Movie component
  15. An issue with search movie and how we can rectify it
  16. Add a warning message if there is no search data in the API
  17. Creating a central file for axios/refactoring
  18. Wrapping Up and source code

LatestMovie component will have the current home page and I will display the movies related to my favorite movie “indiana”

On clicking on each movie, will display details of every single movie, Which can be done by using the Movie component.

Provided an option to search and display those movies, which can be handled by SearchMovie component.

7. Add Vuetify to the Project

As already discussed, we are using the Vuetify for the desgin of the App. Need to do some groundwork for that. on the terminal, type

vue add vuetify

After installation, our front end will look like this:

Awesome right, they provide a nav bar also. Then will proceed.

8. Add vue-router to the project

Will explain why we needed the vue-router, it will do the routing functionalities and component switching without hassle. Installing the vue-router is by

npm install vue-router

now, need to link the router to the application and create a routes file.

  1. Why Axios?
  2. Why Vuetify?
  3. A brief about the movie API
  4. Calling and testing API and Test.
  5. Create an App
  6. Requirement and structure of the App
  7. Add Vuetify to the Project
  8. Add vue-router to the project
  9. Add axios to the project
  10. Remove the currently scaffolded component
  11. Create LatestMovies component
  12. Implement Movie Component
  13. Display the ratings
  14. Add Search Movie component
  15. An issue with search movie and how we can rectify it
  16. Add a warning message if there is no search data in the API
  17. Creating a central file for axios/refactoring
  18. Wrapping Up and source code

1.Create a router file

I am following a pattern by which create a folder called router in the src path and in that, will create an index.js file

2. Add content to the router file

So far, we created a router/index.js file now need to import the Vue instance and vue-router to that file also, need to export the default router file.

Each router path will have 3 components: path, name, component.

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
  routes: [
    {
    }
  ]
})

3. Link the router to the app

First, need to import the router from the path, and use that in the Vue instance. All these are done in the src/main.js file

import router from ‘./router’

Current main.js file will look like this:

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

9. Add axios to the project

Axios is our point of contact to call the API services in this app. Now we need to install axios to our project.

npm install axios --save

10. Remove the currently scaffolded component

By default, we are having a component in place, will remove that and will create the components we needed.

HelloWorld.vue is the default component, will remove that from our app.

11. Create LatestMovie component

Need to do some steps here

  1. Why Axios?
  2. Why Vuetify?
  3. A brief about the movie API
  4. Calling and testing API and Test.
  5. Create an App
  6. Requirement and structure of the App
  7. Add Vuetify to the Project
  8. Add vue-router to the project
  9. Add axios to the project
  10. Remove the currently scaffolded component
  11. Create LatestMovies component
  12. Implement Movie Component
  13. Display the ratings
  14. Add Search Movie component
  15. An issue with search movie and how we can rectify it
  16. Add a warning message if there is no search data in the API
  17. Creating a central file for axios/refactoring
  18. Wrapping Up and source code

Create a file called LatestMovie.vue in components folder.

2. Add the axios to the LatestMovie component.

Here, we are using the mounted() life cycle for this, added the code to get the result from the omdbapi with the indiana movie data.

mounted () {
  axios
    .get('http://www.omdbapi.com/?s=mummy&apikey=XXXXX&page=1&type=movie&Content-Type=application/json')
    .then(response => {
      this.wholeResponse = response.data.Search
    })
    .catch(error => {
      console.log(error)
    })
}

3. Link the router to LatestMovie.

Now, we need to link the LatestMovie to the router file.

in the src/router/index.js:

import LatestMovie from '@/components/LatestMovie'

add the links to the router/index.js:

export default new VueRouter({
  routes: [
   {
      path: '/',
      name: 'LatestMovie',
      component: LatestMovie
    }
  ]
})

4. Add a progress bar for LatestMovie

If the API will take time to retrieve, we will need to display a progress bar. This can be achieved by using the “ <v-progress-circular” from vuetify.

Created a data property which will be set to true initially, then after the API response will be set to false.

Also another data property called wholeResponse will take care of the data.

So totally our LatestMovie.vue becomes:

<template>
<v-container v-if="loading">
    <div class="text-xs-center">
      <v-progress-circular
        indeterminate
        :size="150"
        :width="8"
        color="green">
      </v-progress-circular>
    </div>
  </v-container>
<v-container v-else grid-list-xl>
    <v-layout wrap>
      <v-flex xs4
        v-for="(item, index) in wholeResponse"
        :key="index"
        mb-2>
        <v-card>
          <v-img
            :src="item.Poster"
            aspect-ratio="1"
          ></v-img>
<v-card-title primary-title>
            <div>
              <h2>{{item.Title}}</h2>
              <div>Year: {{item.Year}}</div>
              <div>Type: {{item.Type}}</div>
              <div>IMDB-id: {{item.imdbID}}</div>
            </div>
          </v-card-title>
<v-card-actions class="justify-center">
            <v-btn flat
              color="green"
              @click="singleMovie(item.imdbID)"
              >View</v-btn>
          </v-card-actions>
</v-card>
      </v-flex>
  </v-layout>
  </v-container>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      wholeResponse: [],
      loading: true
    }
  },
  mounted () {
  axios
    .get('http://www.omdbapi.com/?s=indiana&apikey=XXXX&page=1&type=movie&Content-Type=application/json')
    .then(response => {
      this.wholeResponse = response.data.Search
      this.loading = false
    })
    .catch(error => {
      console.log(error)
    })
  }
}
</script>
<style lang="stylus" scoped>
  .v-progress-circular
    margin: 1rem
</style>

Now, add the router-view to the App.vue to display the component:

<router-view></router-view>

12. Implement Movie Component

Now, it is the time for the single movie part. This can be achieved by using the Movie.vue file.

  1. Why Axios?
  2. Why Vuetify?
  3. A brief about the movie API
  4. Calling and testing API and Test.
  5. Create an App
  6. Requirement and structure of the App
  7. Add Vuetify to the Project
  8. Add vue-router to the project
  9. Add axios to the project
  10. Remove the currently scaffolded component
  11. Create LatestMovies component
  12. Implement Movie Component
  13. Display the ratings
  14. Add Search Movie component
  15. An issue with search movie and how we can rectify it
  16. Add a warning message if there is no search data in the API
  17. Creating a central file for axios/refactoring
  18. Wrapping Up and source code

Add the Movie.vue file

Add the file in components/Movie.vue

Add the router

Register the Movie.vue to the router/index.js file

import Movie from '@/components/Movie'


Add the mode

There is “#” is there in the URL, we can remove those using the

mode: history

In the router/index.js file.

Pass the props in a router.

Create a path for the Movie.vue component, using the below code in the router/index.js

{
      path: '/movie/:id',
      name: 'Movie',
      props: true,
      component: Movie
    },

We are giving props: true because we are passing the imdb_id to the Movie.vue component then that value is used to call the API for that single movie.

Pass the props in latest component

Now up on clicking on the view in the LatestMovie, will call the method which will, in turn, pass the imdb_id as a props to the Movie.vue.

<v-btn round
              color="green"
              @click="singleMovie(item.imdbID)"
              >View</v-btn>

and the singleMovie method is

methods: {
    singleMovie (id) {
      this.$router.push('/movie/' + id)
    }
  }

Work on the props data in the movie component

Now, the data is passed from the LatestMovie. That value is received as prop in the Movie.vue component. This value can be used by this.id

Also, added a data property called singleMovie to handle the response.

The code in the Movie.vue becomes,

<template>
  <v-container>
    <v-layout row wrap>
      <v-flex xs12>
        <h2>welcome to single movie component</h2>
          <div>{{singleMovie}}</div>
      </v-flex>
    </v-layout>
  </v-container>
</template>
<script>
import axios from 'axios'
export default {
  props: ['id'],
  data () {
    return {
      singleMovie: ''
    }
  },
  mounted () {
    axios
      .get('http://www.omdbapi.com/?apikey=b76b385c&i=XXXXX&Content-Type=application/json')
      .then(response => {
        this.singleMovie = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>
<style>
</style>

13. Display the ratings

The omdbapi will provide us the current ratings for the movie. We will display that value in the table,

For that, will display using a modal, which will be invoked on clicking the view rating button.

<template>
<v-layout row wrap>
      <v-flex xs12>
        <div class="text-xs-center">
        <v-dialog
          v-model="dialog"
          width="500">
          <v-btn
            slot="activator"
            color="green"
            dark>
            View Ratings
          </v-btn>
          <v-card>
            <v-card-title
              class="headline grey lighten-2"
              primary-title
            >
              Ratings
            </v-card-title>
            <v-card-text>
              <table style="width:100%" border="1" >
                <tr>
                  <th>Source</th>
                  <th>Ratings</th>
                </tr>
                <tr v-for="(rating,index) in this.ratings" :key="index">
                  <td align="center">{{ratings[index].Source}}</td>
                  <td align="center">{{ratings[index].Value}}</td>
                </tr>
              </table>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn
                color="primary"
                flat
                @click="dialog = false"
              >
                OK
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </div>
      </v-flex>
    </v-layout>
  </template>

We are iterating a data value called ratings. This data property is from a response from API ie r_esponse.data.Ratings._

14. Add Search Movie component

For this, we need to create the following:

  1. Why Axios?
  2. Why Vuetify?
  3. A brief about the movie API
  4. Calling and testing API and Test.
  5. Create an App
  6. Requirement and structure of the App
  7. Add Vuetify to the Project
  8. Add vue-router to the project
  9. Add axios to the project
  10. Remove the currently scaffolded component
  11. Create LatestMovies component
  12. Implement Movie Component
  13. Display the ratings
  14. Add Search Movie component
  15. An issue with search movie and how we can rectify it
  16. Add a warning message if there is no search data in the API
  17. Creating a central file for axios/refactoring
  18. Wrapping Up and source code

commit link for this

15. An issue with search movie and how we can rectify it

Currently mounted lifecycle hook is called only one time, when we search for one time, it displays the data, ie when searched with iron man, it shows the data. but After searching with “titan”, It shows the same data. This can be fixed by using the watch property on the props of the data called name(from the App.vue) and updated the mounted property as a method. As a result, the system will call 2 times, ie when the first loaded by the mounted lifecycle hook and again search will be handled by the watcher action for the props(name) value.

commit link for the fix

16. Add a warning message if there is no search data in the API

Suppose, when we are calling for the API with invalid movie or movie that is not available in our omdbapi . In that case, need to display a message.

We are creating a data property by default which is false, when searched data is not returning anything, will set as true and it will display the message.

commit link for the code change

17. Creating a central file for axios/refactoring

Still, our axios and API calling codes are scattered everywhere in the component. It will good if we place those all in a single place like services in angular.

For that

  1. Why Axios?
  2. Why Vuetify?
  3. A brief about the movie API
  4. Calling and testing API and Test.
  5. Create an App
  6. Requirement and structure of the App
  7. Add Vuetify to the Project
  8. Add vue-router to the project
  9. Add axios to the project
  10. Remove the currently scaffolded component
  11. Create LatestMovies component
  12. Implement Movie Component
  13. Display the ratings
  14. Add Search Movie component
  15. An issue with search movie and how we can rectify it
  16. Add a warning message if there is no search data in the API
  17. Creating a central file for axios/refactoring
  18. Wrapping Up and source code

commit link for the code change

18. Wrapping Up and source code

Our final output will be this:

GitHub URL

And there we have it!

I hope you have enjoyed following along. Please leave claps and comments if you liked the content and would like to discuss further!

Recommended Courses:

Vuejs 2 + Vuex + Firebase + Cloud Firestore

Building Applications with VueJs, Vuex, VueRouter, and Nuxt

Ethereum and Solidity: Build Dapp with VueJS

Learn Web Development Using VueJS

Curso de VueJS 2

10 Best Vue Icon Component For Your Vue.js App

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

Icons are the vital element of the user interface of the product enabling successful and effective interaction with it. In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

1. Animated SweetAlert Icons for Vue

A clean and simple Vue wrapper for SweetAlert's fantastic status icons. This wrapper is intended for users who are interested in just the icons. For the standard SweetAlert modal with all of its bells and whistles, you should probably use Vue-SweetAlert 2

Demo: https://vue-sweetalert-icons.netlify.com/

Download: https://github.com/JorgenVatle/vue-sweetalert-icons/archive/master.zip

2. vue-svg-transition

Create 2-state, SVG-powered animated icons.

Demo: https://codesandbox.io/s/6v20q76xwr

Download: https://github.com/kai-oswald/vue-svg-transition/archive/master.zip

3. Vue-Awesome

Awesome SVG icon component for Vue.js, with built-in Font Awesome icons.

Demo: https://justineo.github.io/vue-awesome/demo/

Download: https://github.com/Justineo/vue-awesome/archive/master.zip

4. vue-transitioning-result-icon

Transitioning Result Icon for Vue.js

A scalable result icon (SVG) that transitions the state change, that is the SVG shape change is transitioned as well as the color. Demonstration can be found here.

A transitioning (color and SVG) result icon (error or success) for Vue.

Demo: https://transitioning-result-icon.dexmo-hq.com/

Download: https://github.com/dexmo007/vue-transitioning-result-icon/archive/master.zip

5. vue-zondicons

Easily add Zondicon icons to your vue web project.

Demo: http://www.zondicons.com/icons.html

Download: https://github.com/TerryMooreII/vue-zondicons/archive/master.zip

6. vicon

Vicon is an simple iconfont componenet for vue.

iconfont
iconfont is a Vector Icon Management & Communication Platform made by Alimama MUX.

Download: https://github.com/Lt0/vicon/archive/master.zip

7. vue-svgicon

A tool to create svg icon components. (vue 2.x)

Demo: https://mmf-fe.github.io/vue-svgicon/v3/

Download: https://github.com/MMF-FE/vue-svgicon/archive/master.zip

8. vue-material-design-icons

This library is a collection of Vue single-file components to render Material Design Icons, sourced from the MaterialDesign project. It also includes some CSS that helps make the scaling of the icons a little easier.

Demo: https://gitlab.com/robcresswell/vue-material-design-icons

Download: https://gitlab.com/robcresswell/vue-material-design-icons/tree/master

9. vue-ionicons

Vue Icon Set Components from Ionic Team

Design Icons, sourced from the Ionicons project.

Demo: https://mazipan.github.io/vue-ionicons/

Download: https://github.com/mazipan/vue-ionicons/archive/master.zip

10. vue-ico

Dead easy, Google Material Icons for Vue.

This package's aim is to get icons into your Vue.js project as quick as possible, at the cost of all the bells and whistles.

Demo: https://material.io/resources/icons/?style=baseline

Download: https://github.com/paulcollett/vue-ico/archive/master.zip

I hope you like them!

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Markdown is a way to style text on the web. The 10 Vue markdown components below will give you a clear view.

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown.

The 10 Vue markdown components below will give you a clear view.

1. Vue Showdown

Use showdown as a Vue component.

View Demo

Download Source

2. showdown-markdown-editor

A markdown editor using codemirror and previewer using showdown for Vue.js.

View Demo

Download Source

3. markdown-it-vue

The vue lib for markdown-it.

View Demo

Download Source

4. perfect-markdown

perfect-markdown is a markdown editor based on Vue & markdown-it. The core is inspired by the implementation of mavonEditor, so perfect-markdown has almost all of the functions of mavonEditor. What's more, perfect-markdown also extends some features based on mavonEditor.

View Demo

Download Source

5. v-markdown-editor

Vue.js Markdown Editor component.

View Demo

Download Source

6. markdown-to-vue-loader

Markdown to Vue component loader for Webpack.

View Demo

Download Source

7. fo-markdown-note Component for Vue.js

fo-markdown-note is a Vue.js component that provides a simple Markdown editor that can be included in your Vue.js project.

fo-markdown-note is a thin Vue.js wrapper around the SimpleMDE Markdown editor JavaScript control.

View Demo

Download Source

8. Vue-SimpleMDE

Markdown Editor component for Vue.js. Support both vue1.0 & vue2.0

View Demo

Download Source

9. mavonEditor

A nice vue.js markdown editor. Support WYSIWYG editing mode, reading mode and so on.

View Demo

Download Source

10. vue-markdown

A Powerful and Highspeed Markdown Parser for Vue.

View Demo

Download Source

Thank for read!

Collection of 15 Vue Input Component for Your Vue.js App

Collection of 15 Vue Input Component for Your Vue.js App

Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.

Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.

1. Maska
  • No dependencies
  • Small size (~2 Kb gziped)
  • Ability to define custom tokens
  • Supports repeat symbols and dynamic masks
  • Works on any input (custom or native)

Demo

Download


2. v-range-flyout

A vue component that wraps a input type=number with a customizable range slider flyout with 2-way binding.

Demo

Download


3. vue-tel-input

International Telephone Input with Vue.

Demo

Download


4. Restricted Input

Allow restricted character sets in input elements.

Features

  • Disallow arbitrary characters based on patterns
  • Maintains caret position
  • Format/Update on paste
  • Works in IE11+

Demo

Download


5. Vue Currency Input

The Vue Currency Input plugin allows an easy input of currency formatted numbers.

Demo

Download


6. vue-fields

Input components for vue.js.

Demo

Download


7. vue-material-input

Simple example of issue I am seeing with input labels.

Demo

Download


8. vue-tribute

A Vue.js wrapper for Zurb's Tribute library for native @mentions.

Demo

Download


9. vue-number-smarty

Number input with rich functionality for Vue.js.

Features

  • integer/float
  • signed/unsigned
  • step size
  • increment/decrement value by scrolling when focused
  • align variants
  • min and max boundaries
  • max length of integer part (only for float type)
  • max length of float part (only for float type)
  • max length of string
  • error state
  • readonly state
  • theme options

Demo

Download


10. Vue input mask

Super tiny input mask library for vue.js based on PureMask.js (~2kb) exposed as directive. No dependencies.

Demo

Download


11. vue-r-mask

mask directive for vue.js

  • Template similar to javascript regular expression. /\d{2}/
  • Directive useful for your own input or textarea.
  • Arbitrary number of digits in template /\d{1,10}/

Demo

Download


12. Vue IP

An ip address input with port and material design support.

Demo

Download


13. v-money Mask for Vue.js

Tiny input/directive mask for currency

Features

  • Lightweight (<2KB gzipped)
  • Dependency free
  • Mobile support
  • Component or Directive flavors
  • Accept copy/paste
  • Editable

Demo

Download


14. Vue Masked Input

Dead simple masked input component for Vue.js 2.X. Based on inputmask-core.

Demo

Download


15. VueJS input component

Mobile & Desktop friendly VueJS input component
Features used
CSS variables
Vue's transition-group
Flexbox

Demo


I hope you like them!