vuejs / systemjs-plugin-vue Goto Github PK

Exporting from a file will cause system-pugin-babel to load the .vue file, apparently not allowing systemjs-plugin-vue to do its job.

Using common cjs syntax module.exports inside the .vue file works just fine.

I know it's mostly abandoned but will leave this comment for others looking into.

After importing *.vue file, browser throws an error:

Uncaught ReferenceError: System is not defined

It is possible to workaround by loading SystemJS manually before running bundle.

But I'm not sure it was intended to have a need in SystemJS running in a browser after compilation. Wouldn't it be more beneficial to completely compile the code, so that bundles receive everything ready?

Any suggestion for another example?

Running vue beta-6 Im getting this error. Im using your base systemjs template for vue cli.

I created https://github.com/vuejs-templates/systemjs/issues/2 earlier because I was not able to build my app.
I've been investigating some, and I might be mistaken but this is what I have found:

System.get and System.set are used because vueCompiler.parseComponent return a script-property with plain JavaScript, which must have a render property with content of vueComponent.compile. And so the template is created as a module and some string manipulation is done to have script require the compiled template.
This doesn't work when running the built version because System isn't available.

I've been playing around with the compiler trying to make a very simple example work, this is my hack so far:

exports.translate = (load, opts) => {
  let sfc = vueCompiler.parseComponent(load.source)
  let compiled = vueCompiler.compile(sfc.template.content, {pad: true})
  let template = compiled.render
  return sfc.script.content.replace(/default {/, `default { render: function(){${template}},`)
}

Here the template is injected directly with the string manipulation. This won't work because with can't be used in strict mode.
So I have tried removing with keyword by string replace, but this won't work because then _h2 (and the other) variable(s) can't be found.

Update

Tried altering the files of systemjs-plugin-vue and vue-template-compiler directly, then copying them into a project for a simple test. Removed with from index.js of vue-template-compiler, then added this. to where ever looked appropriate and it seems to run fine.
Style and language support is dropped, but theory is fine. Here is an example:
https://gist.github.com/eirikb/1abf8335d4b7c5894b50db7718278fff