How to use IMDB Api with Vue.js


Vue.js

Hi everyone. I will tell you how did i make this projec(VuejsIMDB). I made this project while learning Vue.js and it really worked.

First of all ,maybe you can think why i am using Vue , why it is not React. Because Vue.js library easier to learn and really small library.

Now let’s start coding.

You must install your pc Node.js for install vue-cli. After you installed Node you will write your command line :

npm install –global vue-cli

After finish this command now vue-cli installed you pc globally you will run this command for create project :

vue init webpack-simple my-project

Now your project created and enter the project folder with this command and run other commands. This commands will install other npm packages for work with Vue.js

cd my-project npm install npm run dev

Vue.js framework has a components for page. This components has a .vue file path. We will create a two component.

1- Film component 2- Search component

Film.vue

Film.vue

Search.vue

Search.vue

After created components we must use this in App.vue. It’s a main page for out template. If we don’t add created components inside App.vue file, we can’t see out components on page.

App.vue

App.vue

After these operations our project needs to run well. But i will share package.json file with you.

Package.json

Package.json

After the coding you must serve your project with vue-cli. Enter this command and you will see project on webpage ( use “ localhost:8080 ”).

npm run dev

In this article we have seen how to do a simple API call with Vue.js. After this practice, you can apply different applications to improve your development. You can implement it using different API calls.

Thank you so much for reading this article. See you next article!