Vue.js: sample app & concrete application

by Boris Stoyanov

To illustrate the simplicity of Vue.js in a real world, we put together a quick starter you can find on this repo.

Note that we use 2 APIs developed by our team in this project:

• The Sport Places API
• The Sport API

Both together allow you to fetch sport places in a specific area. We’ll build:

• a simple map showing places markers using Google Maps API
• a sports list

The documentation of both APIs can be found on Decathlon Developers Portal.

We’ll start with our project structure:

- src
  - main.js
  - App.vue
- components
     - GoogleMap.vue
     - Sports.vue
- index.html
- package.json
- yarn.lock
- README.md
- webpack.config.js

Our index.html, where our application is bound onto the app id.

In our src folder, the main.js file takes care of instantiating our project. Note the use of VueGoogleMaps, a handy library allowing us to quickly work with Google Maps. Note you need to specify the library you’d like to use, here the places looks appropriate.

Our base component is Vue.app. Where all sub-components representing our application sit. Note the simplicity provided by Vue.js allowing us to write templating language (HTML, Pug, etc…), Javascript and if needed, CSS (SCSS, Stylus, etc…).

Two components are imported in this file, Sports and GoogleMap. A simple declaration of those components allows us to use them in our template.

Now, the most interesting part, our smart components, receiving data. Let’s start with Sports. What does it do? Simply fetching sports objects from the Sports API and displaying them as a list.

Note that for the sake of conciseness in this article, we omit CSS. You can find the complete file in the repo.

REACT developers might find similarities here. While looping over sport items using the Vue directive v-for, we need to use another v-bind:key to which we pass a sport id. Official docs says:

If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index.

Find the full doc here.

Final piece, our map component. A lot of features allowing us to use Google Maps are built in VueGoogleMaps so you don’t have to worry about them.

Once this component created, we use Axios to fetch places from Sport Places API and create markers. Every time a marker is clicked, we recenter the map. we also detect user location thanks to its navigator location.

Conclusion

In this article we covered the main reasons why we use Vue.js at Decathlon. Wildly used among the company in various projects, we find it so far robust and easy to use. The debate around Vue.js vs. React is real. React offers React Native allowing developers to build strong mobile apps. In order to deliver MVPs and test them quickly on the market, using Vue.js allows to move fast toward that vision.