Vue.js Tutorial: Learn to Build a Web App Quickly


Hi everyone, I am Didin J. the author of Today I wanna show you a Vue.js Tutorial: Learn to Build a Web App quickly. In this Vue.js step by step tutorial, you will learn how to build a web app quickly. What we build is not just a simple web page that displays “hello world”. More than that, this web application display a list of data from the local data, displays data details, and shows the google maps of the current location in data. This tutorial divided into several steps: Step #1. Preparation. Step #2. Create a Vue.js web app. Step #3. Add Vue.js Router. Step #4. Create an Array of Objects File. Step #5. Show List of Data using Bootstrap-Vue. Step #6. Show Data Details using Bootstrap-Vue. Step #7. Show Google Maps. Step #8. Run and Test the Vue.js web app. The following tools, framework, and modules are required for this tutorial: Node.js (Recommended version), Vue.js, Boot- strap-Vue, Terminal (for Mac or Linux) or Node command line (for Windows), IDE or Text editor (we are using Visual Studio code). Step #1. Preparation. We need to prepare the environment to create a a Vue.js web app. First, we need a Node.js with working NPM or yarn command. We assume that you have already downloaded and installed Node.js. Make sure the Node.js command line is working (on Windows) and runnable in (Linux or macOS) terminal. To check the Node.js and NPM working, type this command in the terminal. “node -v” our node version is 10.15.1, “npm -v” our npm version is 6.13.1, “yarn -v” our yarn version is 1. 19.2. Next, we will use Vue- CLI to create a new Vue.js application. Vue CLI is a full system for rapid Vue.js development with the current latest version is 4.1.1. To install the Vue-CLI 4, type this command from the terminal or Node command line. “sudo npm install -g @vue/cli”. Next, check the version to make sure that you have the 4.x version of Vue- CLI. “vue –version”, now we are using at @vue /cli 4.1.1. Step #2. Create a Vue.js web app. To create a Vue.js application using Vue-CLI to type this command in the terminal or cmd. “vue create vue- tutorial”, if you see question like this leave as default then wait for package installation finished. Next, go to the newly created folder. To make sure that created Vue.js project working, type this command to run the Vue.js application. You will see this page when open `http:// localhost:8080/` in the browser. To start working with this new Vue.js application, open this Vue.js project with your favorite Text Editor or IDE. To use Visual Studio code, just type this in the terminal after stopping the running Vue .js application by press CTRL+C. Now, you can continue to the next step. Step #3. Add Vue.js Router. If you check the dependencies inside package.json, Vue-router is not installed yet. For that, type this command to install that module. “npm install vue-router”. Before declaring the vue-router, we need to add the required components for this tutorial. To register or create routes for the whole application navigation, create a router folder and index.js file. Open and edit `src/router/index.js` then add these imports of VueRouter and the required created components. Declare the routers for each component. Finally, add or register this router file to `src/ main.js` by adding these imports of VueRouter and router. Register the vue-router after `Vue. config`. Modify `new Vue` to be like this. Next, open and edit `src/App.vue` then replace all Vue.js templates and codes with this. Step #4. Create an Array of Objects File. We will use the array of objects data that get from the JavaScript file. For that, create a new JavaScript file in the root of projects project src folder. Open and edit that file then add these lines of the array. Because they are local images for the team logo, add an `img` folder inside assets folder then paste the team logos from our GitHub. Step #5. Show List of Data using Bootstrap-Vue. We will use the Bootstrap- Vue library as the UI/UX for this Vue.js web application. For that, type this command to install the Bootstrap- Vue module. Next, open and edit `src/ main.js` then add these imports of BootstrapVue and Bootstrap stylesheet. Add this line after `Vue.config`. Now, open and edit `src/components/ List.vue` then add these lines of codes that contain Bootstrap-Vue templates and a method to get the list of data from the array of objects file. Step # 6. Show Data Details using Bootstrap- Vue. From the list of teams, users can click the item of the list then navigate to the details page with the ID params. The ID should receive in the details page using Vue.js $route.params. Open and edit `src/components/Details.vue` then add these lines of codes that contain Bootstrap-Vue template components and a method to get a single data from the array of objects by ID. Actually, the “find” or “filter” method of the array has an error with the current core-js module. The solution is update the core-js module to the latest versions by type this command. Now, we are using this working version of the core-js module. Step # 7. Show Google Maps. You can use your own or someone else Google Maps API key to implementing Google Maps on the web page. To display Google Maps, first, we need to install the google-maps-api-loader module. Add a new component to load Google Maps. Open and edit `src/components/ GoogleMapLoader.vue` then add these lines of codes that required to load Google Maps. Next, implement Google Maps to the maps component by open and edit `Maps.vue` then add this lines of Google Maps and required Vue.js codes. Step #8. Run and Test the Vue.js Web App. Right now, we will test all of the functions of the Vue.js web application. Just run again this web app. And here it is, you can test navigate from the list to the map pages. That it’s, Vue.js Tutorial: Learn to Build a web app quickly. You can get the article and full source code link in the description below. If you liked this tutorial please click like, share, comment and subscribe to this channel to make more power to create more Vue.js tutorial. Thank you and see you later!

Leave a Reply

Your email address will not be published. Required fields are marked *