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 fullscreen map application as an example on 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. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key or Get your FREE API key here - Start your local environment
npm run serve
- You will find your app on 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.