Snowpack: Vue

[lroal]

Will it work with .vue files ?
Are there any examples for such a setup ?

[c4software]

Hi,

It's a good question. With the latest Vue package on NPM there is a problem, the « advertised » package for module is "module": "dist/vue.runtime.esm.js".

It's great (if you don't need templating), but in the dist folder there is an another ESM build (i think the one we want) vue.esm.browser.js.

With the current version of @pikapkg/Web we can't choose which ESM build to pick, so for me, with VueJS we are stuck with the current packaging configuration.

PS: I know its not directly related to pikapkg…

[FredKSchott]

@c4software you actually can point to the correct file, if you'd like. See here, where I got around a package that only exported a "main" entrypoint: https://github.com/lukejacksonn/perflink/issues/15/#issuecomment-480684060

As for .vue dependencies, they probably won't install correctly. @pika/web doesn't do any transpilation, and my understanding is that .vue files are not valid JS.

If you mean that you are writing .vue source files, then @pika/web dependencies should work like any other import! If someone can get an example together, I'd love to add it to the EXAMPLES list!

[c4software]

@FredKSchott Perfect ! I had to upgrade Pikapkg/Web but its working flawlessly 👍

And for the .vue files are indeed not valid JS, those file are transpiled when bundling, but (i didn't try it) there is a http-vue-loader package on github : https://github.com/FranckFreiburger/http-vue-loader

[lroal]

Thanks for great responses. So, in theory, .vue source files should work if transpiled when bundling it or we could use the http-vue-loader ?
It would be great if someone could provide a full example.

[FredKSchott]

@c4software Huh, marked & prism are interesting. I actually never realized that UMD packages would be supported by default just due to the fact that they don't have any imports to worry about. 🧐

+1 for a full example. No one really publishes .vue files to npm (correct me if I'm wrong on this!) so then the only concern is just getting an example of a .vue source file being compiled correctly using @pika/web dependencies.

[c4software]

@FredKSchott Its working really well Sample

I will do a quick sample using http-vue-loader this week-end.

[orozot]

@FredKSchott Its working really well Sample

I will do a quick sample using http-vue-loader this week-end.

@c4software Thanks for your example, but i got a mistake when follow your webDependencise config. It's always show
Error: Cannot find module '/app/node_modules/vue/dist/vue.esm.browser.js/package.json'
Have you seen this problem before?
Here is the sample code https://glitch.com/~vue-esm-test

[FredKSchott]

@orozot try updating @pika/web, you may be using an older version

[c4software]

@orozot Yep update @pika/web and the problem will be fixed

[zimmicz]

Hi,
should vue imports be working at this stage? I've set up snowpack using

const commonjs = require('rollup-plugin-commonjs');
const vue = require('rollup-plugin-vue');

module.exports = {
  rollup: {
    plugins: [
      commonjs(),
      vue(),
    ],
  },
};

Serving it with npx servor --reload I get
Loading module from “http://localhost:8080/src/App.vue” was blocked because of a disallowed MIME type (“application/octet-stream”). when loading the app.

[FredKSchott]

Right now Snowpack is a purely dependency-transforming tool, so you'll need to to set up Babel or another source tool for source code transformation.

Snowpack v2 will have a built in dev server for you to use as well. You can track progress in #270.

You should also check out Vite: the unbundled dev server from the Vue team that works with Snowpack: https://github.com/vuejs/vite