Member-only story
Use Mapbox Popups with Vue 3
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: