[Vuejs]-Cannot use newly installed plugins (node modules) in Nuxt pages/components

by

0👍

✅

The reason why you’re getting the error mapboxSdk is not defined is because there are a few issues with the way you’ve set up this plugin.

Docs here https://nuxtjs.org/docs/2.x/directory-structure/plugins/, they have some useful diagrams.

There are a couple of ways you can use this package.

Plugin

// ~/plugins/mapbox-sdk.js
import mapboxSdk from '@mapbox/mapbox-sdk'

export default (_ctx, inject) => {
  // Exposing the mapboxSdk to your Nuxt app as $mapBox.
  inject('mapBox', mapboxSdk)
}

Then in nuxt.config.js, same as you’ve already done.

plugins: [
  ...
  "~/plugins/mapbox-sdk.js",
],

Then in your component myMap.vue

var mapboxClient = this.$mapBox({ accessToken: MY_ACCESS_TOKEN });

Directly in the component:

If you don’t wish to use a plugin, the way that @kissu mentioned above https://stackoverflow.com/a/67421094/12205549 will also work.

0👍

Try adding this after the import to let Vue know that this method exists (in the same .vue file) at first

<script>
import mapboxSdk from '@mapbox/mapbox-sdk'
export default {
  methods: {
    mapboxSdk,
  },
  mounted() {
    console.log('mapbox function >>', mapboxSdk)
  },
}
</script>

Do you have it working in a .vue component at first ?

enter image description here

Leave a comment