Get Started with Vue.js and MapLibre GL JS
In this tutorial, you’ll learn how to display a map in Vue.js using MapLibre GL JS. Together we will make a simple full-screen map application as an example of how to use MapTiler maps together with Vue.js and MapLibre GL JS for your own Vue.js app.
Installation and setting up
- Clone the Get started with Vue.js and MapLibre GL JS repo
git clone https://github.com/maptiler/get-started-vuejs-maplibre-gl-js.git my-vuejs-map
- Navigate to the newly created project folder my-vuejs-map
cd my-vuejs-map
- Install dependencies
npm install
- Now navigate to the
src
folder and open theApp.vue
file. ReplaceYOUR_MAPTILER_API_KEY_HERE
with your own API key. Make sure to protect the key before publishing your map app! - Start your local environment
npm run serve
- You will find your app on the address http://localhost:8080/. Now you should see the map in your browser.
Learn more
If you want to learn how to create a Vue.js component to render a map using MapLibre GL JS see the How to display a map in Vue.js using MapLibre GL JS tutorial.
Vue.js with MapTiler maps
If you’re looking to develop Vue.js applications with MapTiler SDK JS, check out our tutorial titled Vue.js with MapTiler maps. This step-by-step tutorial will provide you with the necessary guidance and examples to create a Vue.js component that leverages the power of MapTiler SDK JS mapping library to render maps.
Vue.js
On this page