Usage with Nuxt 3 #47
Answered
by
MelihAltintas
meister-eder
asked this question in
Q&A
-
|
Hi, I'm trying to get your package to work with Nuxt 3. 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. |
Beta Was this translation helpful? Give feedback.
Answered by
MelihAltintas
Nov 24, 2021
Replies: 3 comments 6 replies
-
|
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 |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
For me it doe snot work. This is output of your sandbox: |
Beta Was this translation helpful? Give feedback.
-
|
Yes, same issue for me as well. |
Beta Was this translation helpful? Give feedback.
Answer selected by
MelihAltintas
-
|
I think vue3-openlayers is not ready for SSR on nuxt3 yet. If you change your nuxt config as below: You can test on and you can run with check it out: https://github.com/smorcuend/nuxt3-openlayers |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Hi! I have a solution for this issue: All you need is to rename your plugin name (that) with "client" suffix at the end as [vue3-openlayers].client.ts. This forces to Nitro (Nuxt) to render code only on browser side. It's necessary to wrap openlayers code with nuxt3 component also to avoid problems on SSR. You can enable ssr flag on nuxt.config.ts now |
Beta Was this translation helpful? Give feedback.
-
|
Hi! How can I reduce the build size? I use Nuxt3 static page generation and the vue3-openlayer is imported in full size 1843 kB. Without it, |
Beta Was this translation helpful? Give feedback.
3 replies
-
|
Hey @arbaev I had the same problem. Here is how I solved it. The downside is that i have to update my plugin file every time I want to use new OpenLayers functionality. Inside
Versus
import { Map, Overlay } from 'ol'
import Feature from 'ol/Feature'
import { Circle, Fill, Stroke, Style } from 'ol/style'
import { Draw, Modify, Snap } from 'ol/interaction'
import { apply } from 'ol-mapbox-style'
import VectorSource from 'ol/source/Vector'
import VectorLayer from 'ol/layer/Vector'
import { VectorTile } from 'ol/layer'
import 'ol/ol.css'
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('Map', Map)
nuxtApp.vueApp.component('VectorTile', VectorTile)
nuxtApp.vueApp.component('Overlay', Overlay)
nuxtApp.vueApp.component('Feature', Feature)
nuxtApp.vueApp.component('Circle', Circle)
nuxtApp.vueApp.component('Fill', Fill)
nuxtApp.vueApp.component('Stroke', Stroke)
nuxtApp.vueApp.component('Style', Style)
nuxtApp.vueApp.component('Draw', Draw)
nuxtApp.vueApp.component('Modify', Modify)
nuxtApp.vueApp.component('Snap', Snap)
nuxtApp.vueApp.component('VectorSource', VectorSource)
nuxtApp.vueApp.component('VectorLayer', VectorLayer)
nuxtApp.vueApp.component('apply', apply)
}) |
Beta Was this translation helpful? Give feedback.
-
|
Not bad! And I just switched to native OSM js, tree-shaking works there and the OSM file takes only 279k 😇 |
Beta Was this translation helpful? Give feedback.
-
|
So vue3openlayers must be pretty efficient. After completely removing it, the bundle size only dropped 5kb from when I was individually choosing which OL functionality I was using.
|
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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