Member-only story

Use Mapbox Popups with Vue 3

Pascal Luther
The Startup

--

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/:

ā€œWelcomeā€ app

To make life easier, letā€™s remove all not needed content so we will have an empty App.vue file like so:

--

--

Responses (5)