Usage with Nuxt 3

[meister-eder]

Hi, I'm trying to get your package to work with Nuxt 3.
I tried importing it in my nuxt.config.ts like this:

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
    buildModules: [
        ['vue3-openlayers', '@pinia/nuxt', '@intlify/nuxt3', '@vueuse/core/nuxt']
    ],
    intlify: {
       // ...
},
    build: {
        // ...
    }
})

Which gives me this error on app startup

ERROR  Cannot start nuxt:  Cannot read property 'webpackJsonpvue3_openlayers' of undefined

  at module.exports.00ee (node_modules/vue3-openlayers/dist/vue3-openlayers.common.js:191:148)
  at node_modules/vue3-openlayers/dist/vue3-openlayers.common.js:203:9
  at g (node_modules/jiti/dist/jiti.js:1:55111)
  at requireModule (node_modules/@nuxt/kit/dist/index.mjs:86:26)
  at installModule (node_modules/@nuxt/kit/dist/index.mjs:1241:50)
  at initNuxt (node_modules/nuxt3/dist/index.mjs:905:11)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:6713:9)
  at async Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:6752:5)
  at async _main (node_modules/nuxi/dist/chunks/index.mjs:386:7)

When I place the import at the end of the buildModules array, the error disappears, but upon opening my testpage I receive the following errors:

[Vue warn]: Failed to resolve component: ol-map
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: ol-view
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: ol-tile-layer
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: ol-source-osm
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Invalid value used as weak map key
  at WeakMap.set (<anonymous>)  
  at normalizePropsOptions (./node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2689:11)  
  at createComponentInstance (./node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6115:23)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:197:22)  
  at Module.ssrRenderComponent (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:623:12)  
  at _sfc_ssrRender (file://./.nuxt/dist/server/server.mjs:4813:31)  
  at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:263:13)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:214:16)  
  at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)  
  at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:310:17)

Not sure if this is the right place to ask, but I'm stuck.
Thanks in advance!

[MelihAltintas]

Hello,

you don't need to add vue3-openlayers to buildmodules. You can use as a plugin.

Nuxt will automatically read the files in your plugins directory and load them. You can use .server or .client suffix in the file name to load a plugin only on the server or client side.

All plugins in your plugins/ directory are auto-registered, so you should not add them to your nuxt.config separately.

Please star the project, If you like it :)

Example usage of nuxt3 : https://codesandbox.io/s/vue3-openlayers-nuxt-forked-e3rfy?file=/plugins/vue3-openlayers.client.js