Mapbox is super cool. 🥳 Vue 3 is super cool. 🥳
Bringing them together can be a bit tricky though.
In this article we will look at how to use a Vue 3 (single file) component as content of a Mapbox popup, while keeping full reactivity and all features of Vue 3 that we so love.
TLTR; In Step 1–3 we will quickly set up a Vue 3 project that uses Mapbox and displays a layer that we want to click on to show the dropbox. If you already have a project setup like this, you can just skip to steps 4+5.
Step 1 — Setup Project
Let’s quickly setup a Vue 3 with the newest version of the Vue CLI:
npm install -g @vue/clivue create projectname
Make sure you have the newest version of the Vue CLI is installed so your created project is actually a Vue 3 project!
Now run your projects with npm run serve and you should be able to see the following on http://localhost:8080/:
To make life easier, let’s remove all not needed content so we will have an empty App.vue file like so:
