Importing ol/style into component

Hello!

In a Nuxt project, I’m using vl-layer-vector, and I need to style the features in the component based on some other data that I import from Wikidata.

This example by @ghettovoice shows clearly how to do it, however, because OpenLayers is included from CDN, you can call ol.style.Style().

But if I want to import Style, Fill, or Stroke into my component’s <script> section usingimport Style from 'ol/style/Style', I get Cannot use import statement outside a module.

This has been brought up in https://github.com/ghettovoice/vuelayers/issues/382 and https://github.com/ghettovoice/vuelayers/issues/281, but there was no clear solution suggested.

I’m happy to contribute the solution to the docs once it’s clarified.

Thanks for the great work 😃

[ghettovoice]

I don’t actually understand what a reason of this error. I have made a short investigation of it and found this issue https://github.com/zloirock/core-js/issues/743. And I found that switching of useBuiltIns : “usage” to “entry” is really helps.

Here is my test app https://github.com/ghettovoice/vl-ol-nuxt-test-app. I have setup it with create-nuxt-app package. Then:

1. add 2 plugins: ~/plugins/ol.js and ~/plugins/vuelayers.js https://github.com/ghettovoice/vl-ol-nuxt-test-app/tree/main/plugins
2. adjust nuxt js config at plugins, modules and build keys https://github.com/ghettovoice/vl-ol-nuxt-test-app/blob/main/nuxt.config.js
3. change default view compoent https://github.com/ghettovoice/vl-ol-nuxt-test-app/blob/main/components/Tutorial.vue.

And it seems working without errors.

[ghettovoice]

Hello @majdal , did you tried setup vuelayers and openlayers inside nuxt as plugin? https://vuelayers.github.io/#/docs/quickstart?id=nuxtjs

UPD also take a note that ol package exports ES6 modules, so probably you also need to try this https://nuxtjs.org/docs/2.x/directory-structure/plugins#es6-plugins