[Mini Project]: LOTR in Vue.js 🧙🏽♂️Axios + ElementUI + Router 👾
👁👁 Hello again and today is a bit different to the usual I do in my daily activity as programmer which is Vue ! I was interested to get to know new Front-End framework and Vue.js which I had my eyes on:👨🏽💻
1- Easy and simple.
2- Super fast and community is AWESOME !🔥
3- Promising and scalability for feature project.
Short Story
I started to learn Vue.js by jumping to one of the known crash course in YouTube , you know something fast to get into the thing.So, I decided to apply what I learnt so far by writing little tiny project for LOTR & The Hobbit. This is live website which i uploaded to Firebase: https://lotr-th-vuejs.web.app/ and also there is full project with code too in Flutter HERE!
Aye! Now, let the boring guy be gone and our Frodo will take the lead from now on !
We finally learned the ultimate truth and my friend Vue.js had helpt me out to make an awesome site. Aye ! We used the following tools to build our called thing “site”:
1- Vue CLI.
2- VS Code.
The user package & the spoken language:
1- JS 💦
2- Vue 2.6 🌟
3- Router & Axios
4- Element UI.
That is all my friend , I wish you are ready, because the time has come for the tough work ! 4 elements we built as the legend suggest: API, views folder, components folder, and router file. This secret had made my time shorter to make this thing happen and organize ofc !
# State Management:
There is no need for complicated state management to manage the data within the project, I just used the simplest and easiest way: emit and property.
Where home view will call movies and then pass the data to property of the component. Emitting for Char view. For more detail, keep reading :)
# API ( Axios ):
The best thing about this API is simple! You wanna get movies ? you can and if you want more , just register yourself and you can get the key simple as that ! https://the-one-api.dev
import Axios from 'axios'const KEY_API = 'get_the_key_by_yourself'export default Axios.create({baseURL: 'https://the-one-api.dev/v2/',proxy: 'http://localhost:8080/',headers: {Authorization: 'Bearer ' + KEY_API}}
);
Here this is going to be usable instance for the whole project. Easy to call from anywhere within the project.
# Router
The routing is quite simple where it delivers 3 views and the mode is in history mode.
Calling Vue instance to allow Vue Router library to be use in the project and also call the desired views to our router. Please having the name of the route given is not necessary ,but nice for debugging.
# App.vue
3 elements that this file contain; template simple as that, script block, and style in CSS.
<template><div id="app"><navbar/><transition name="fade" mode="out-in"> <router-view/></transition></div></template>
calling two main parts: navbar component and router-view where it will normally shows navigated views. The transition element is referring to animation that modified by in some CSS script.
<script>import {navbar} from './components'export default {name: 'app',components:{navbar}}</script>
Calling navbar component. Then assign the id/class name of this component in App.vue’s template.
Wo wo wo, ok this is little customization of the animation and also the background of application.
<style scoped>.fade-enter-active,.fade-leave-active {transition-duration: 0.3s;transition-property: opacity;transition-timing-function: ease;}.fade-enter,.fade-leave-active {opacity: 0}html,body {background: rgb(83, 23, 23);}</style>
# HOME VIEW
The below figure shows the anatomy of home view which contains the components and also other required methods such as API call and so on…
home.vue
Template
The template is divided into two rows which each of them has its own purpose. First one, contains the title MOVIES text. Second one, will have basic logic that checks if there is error from the API so then display if not, then we are sure there is something to display.
Hint: I also used another if statment to check if the movies List object is not null, but you can also use v-else to display anything you wish like , no data to show for instnace !
Script
To see the full code, please refer to the GitHub link or HERE. here we simply setup data that contains movies , errorMessage if there is any, and loading property to control the indicator. beforeMount is a method used to call before rendering the component and it is the best place to call API method.
listMovies.vue
Template & Script
It is simply taking the given data and then pass to the child component called movieItem.vue. But here it just shows how we take over the data from home.vue and then handle it in FOR LOOP. That clearly tells US that row is responsive base on the size of the screen. This is how ElementUI library takes and act base on the given configuration, from XL to XS screen size. The full code HERE
<template><div><el-col:span="12"v-for="movie in listMoviesProp.docs":key="movie._id":xs="12":sm="10":md="8":lg="7":xl="6"><movie-item v-bind:movie="movie"></movie-item></el-col></div></template><script>import movieItem from './movieItem';export default {name: "listMovies",props: ["listMoviesProp"],components: {movieItem},};</script>
movieItem.vue
Template
Needs to split this into small codes and explain individually.Box-card, that is the name of class’s element where ElementUI refers too. Shadow attribute that tells that the card always had shadow.
<el-card class="box-card" shadow="always">After this, we have the header that contains: movie’s name, rate, and button to display the dialog. Each written element are using ElementUI components and also worth to mention if you want to show one fraction from you number, it is worth to use toFixed(0) method from JS.
<div slot="header" class="clearfix"><span>{{ movie.name }}</span><el-button @click="dialogVisible = true"style="float: right; padding: 3px 0"type="text">Read More</el-button><el-row><span>Rotten Tomatoes: {{ movie.rottenTomatesScore.toFixed(0) }}%</span></el-row></div>
Script
3 Properties are defined within this component; data, props, and methods. Data, you already know it is a must in VUE.JS if we have local data to use, so I declared property that triggers the dialog to show if the card is clicked, initialized ofc false so it won’t show any dialog. Props, that gets the passed object from listMovies.vue component that we spoke. Methods, it contains a method triggers other dialog that asks if the user is sure or not to close, but it was not used yet.
<script>
export default {data() { return {dialogVisible: false,};},props: ["movie"],methods: {handleClose(done) {this.$confirm("Are you sure to close this dialog?").then((_) => {done();console.log(_);}).catch((_) => {console.log(_);});},},};</script>
# Search View
The purpose of this page is to render return result that been search of in this API, return a name and the id of the object.
as You can see that we break down this view into main view and one component , TextField under name Search.
Template
In the template, we defined two rows that contains one component and rendering object of the respond into text.
Script
Data, two variables;
1- it is an object, character.
2- isLoading is boolean, helps to trigger the indicator. Methods, onTermChange is a function get one string parameter passed by search component. The function is simply implementing a GET function that returns a respond weather it is empty respond or an object we expect and at the end isLoading will be changed into false so the indicator will stop.
Search.vue
This componet working as omitting data from text input that pass the information our prevoius componet / view . el-input element will call v-on that is passing into a method named searchInputMethod. This method is emitting the data under the name termChange and that is why char.vue in template we called v-on:termChange to pass the data.
About.vue
The last view is honestly written to how you can use ElementUI and how you can layout such basic page that shows details of yourself or anything you like by using this timeline cards :) For the code please refer to HERE
Conclusion
We reached the end, so i would like to summeries what we did so far:
1- How to use emit / property.
2- How to use Router for basic functionalities.
3- How to use Axios and have one configured instance that can be shared for the whole project.
4- How to handle errors , pass value(s) after getting respond.
5- How to use beforeMount function.
6- How to use ElementUI.
That is so far. However, the project may sound small but covers up mostly the basic aspects of Vue.js and giving good fundemental to build small project / components for your work.
What is the plan ?
Aqueduct server for Flutter serious:
1- Project Idea and design of the project.
2- Write controllers and configuration for the server.
3- Design the DB and write models.
4- Write package for flutter: models & api.
5- Flutter application.
Please feel free to see my GitHub and if you feel that my content is worth then please share with everyone.
I know that this content is free, but your support will have me writing more creative & helpful content , so please buy me coffee
