Bug: gmap-vue breaks in Nuxt unless defined as client side only

[davydnorris]

Please complete all sections that you can but please don't remove any section, otherwise the bot will close your issue because it doesn't meet our issue template (you can remove this comment)

Describe the bug

A default install and configuration of gmap-vue into a Nuxt project as per the documentation will fail with the message "Document is not defined" when a page containing a map is displayed. This is due to the default Nuxt behaviour of server side rendering, and the fact that the MapLayer component has a CSS style section in it.

To reproduce

Steps to reproduce the behavior:

1. Create a new Nuxt project
2. Add gmap-vue library, and create a plugin file as per the dcumentation
3. Add the plugin and the transpile directive to nuxt.config.js as per the documentation
4. Add a gmap-map component to a page
5. Run the application. It will compile without error
6. Navigate to the page containing the map.

Expected behavior

The map is displayed correctly

Current behavior

The page will not display and will show a "Document is not defined" error

Screenshots

N/A

Desktop (please complete the following information)

• OS: Windows
• Browser any
• Version 3.5.2

Smartphone (please complete the following information)

• Device: N/A
• OS: N/A
• Browser N/A
• Version N/A

Additional context

The issue is fixed by specifying that gmap-vue is a client side plugin. This is done via the following in nuxt.config.js:

  plugins: [
    { src: '@/plugins/gmap-vue', mode: 'client' }
  ],

The documentation on setting up in Nuxt should be updated to show this

Versions

• Node: any
• NPM: any
• Yarn: any

Package manager

• [X] NPM
• [X] Yarn

Plugin version

• [ ] 1.4.x
• [ ] 1.2.x
• [ ] 1.0.x

[close-issue-app[bot]]

This issue is closed because it does not meet our issue template. Please read it.