Ah. I think I’ve got a solution that is workable. Loading the iframe in the background and communicating via sendMessage.

I’ve got an interesting use case. I’ve made Vue SPAs before but never have had to implement something of this nature.

We’re developing this project to be deployed as a cordova mobile app, a web app, a UWP app, and we also need to integrate a specific portion into our existing project.

I’ve really got no idea where to start with the “inject into existing project” portion. Ideally we could transpile a component into a JS+CSS file, include that into our existing project, and then call something like Component.open(params); in our native JS, which would ideally open the component in a fullscreen modal/overlay.

Now, I know with a native component I could do something like Component().$mount('div'); to mount it to the overlay, however I’m not quite sure on where I should start to add/change tooling so I can export this specific component into a format that isn’t SPA and is just a component. I know this is a very abnormal use case so I’m just putting feelers out there.

I thought Quasar’s UMD was what I was looking for but I’m not so sure. Ideally I want to be able to export just a single component and then use it like I would via a router. Right now the current solution I’ve implemented is just an iframe, but it is far from ideal.

an anchor element didn’t work either, and oddly enough setting an image src resolves the src to [object Module]. Looks like I’m barking up the wrong tree

@Hawkeye64 What is the proper way to require it" Using the require example from the documentation doesn’t work, adding an attribute to the div with the ~assets/config.js leaves that attribute as ~assets/config.js (was assuming it would resolve to the transpiled URL per documention?).

@Hawkeye64 It’s in the assets folder and it doesn’t get transpiled - I think this is because I’m not requiring it anywhere that the webpack loader will transpile it though (from what I can tell from documentation). It gets loaded by javascript in the Vue component, but not with an import. I have to pass the URL to the external library to read it.

@jeffatpf said in Transpile a single JS file?:

Check out the quasar.conf.js build->transpileDependencies setting.

Thanks for the response! That is for node_modules only it looks, but I might be able to glean from the quasar source and replicate it for my file.

Hello all! I tried searching for an answer. I’m currently working on a solution.

I have an external non-Vue dependency that takes a config file. This config file is intended to be written in Vanilla JS - this is fine however more for compatibility and convenience I’d also like this file to be transpiled.

I’m not terribly familiar with Webpack unfortunately.

Right now I have src/assets/module.config.js, it has an ES6 import statement. Without changes to quasar.conf.js loading assets/module.config.js just returns the raw file. I’ve tried extending the entrypoint in the webpack config and that didn’t help.

I’ll still knock at it a bit but I’m a little lost here. Ideally I’d like to use Quasar to transpile that file as well, so I don’t have to add a separate gulp build step.