Feature request: Vue components

[jpsc]

Using vue-component-compiler.

[devongovett]

Yep, totally want to do this. May require some changes to how the internals work to allow an asset to have multiple sub-assets I guess (e.g. script, style, etc.). I'm working on how this might work and will update this issue.

[mubaidr]

Just to remind that subsections can be js, ts, pug, html, css, scss, stylus.

[jamiebuilds]

@sdras Do you know anyone in the Vue community who might be willing to help with this?

[sdras]

I'm not sure their availability, but @kazupon, @Jinjiang and @Alex-Sokolov are major contributors to vue-loader, so they might be interested/the best people to talk to.

[kazupon]

In the roadmap of vue project, vue-componet-compiler work in progress.
Design Thread: vuejs/vue-component-compiler#28

The goal of this project support to a bundle-agnostic package so that it can be reused in all tooling in the ecosystem.

You might be asked @znck and @eddyerburgh about it than I do.

[znck]

I would suggest you use vue-component-compiler, this would keep parcel at feature parity with officially maintained build utils like vue-loader etc.

vuejs/vue-component-compiler#28 is awaiting final design review. The example implementation covers everything discussed in the thread, you should join above design thread to express your concerns.

[eddyerburgh]

I could help build this in the new year

[davidnagli]

@shawwn Are you also working on this?

[zzz6519003]

how does @webpack implement this

[eddyerburgh]

@zzz6519003 There's a vue-loader maintained by Vue.

We're planning to add support for Vue SFCs to parcel core.

[znck]

@devongovett Hey! I need to understand how parcel works to make vue-component-compiler work with it.

In order to compile .vue file, <style>, <template> & <script> parts should be preprocessed.

• With webpack, required loaders are added in require string.
• With rollup, resolve & resolveId is used to import parts of the vue file.

The question:
How to mock/resolve part of a file as another asset? How to process part of a file (e.g. template with pug, style with scss etc) and collect result?

[zzz6519003]

@eddyerburgh i have time now, i can probb figure that out, and make one XD

[eddyerburgh]

@zzz6519003 join parcel slack, we can discuss implementing in the vue channel

[tom76kimo]

Basically, parcel supports .babelrc. So we just need to have a vue plugin or preset which has capability to transform vue code like vue-loader and put it in .babelrc then it will work, right? This way keeps parcel clean and let the configs of vue be scoped in vue preset/plugin. Do we have to add native support for vue?

[eddyerburgh]

@tom76kimo we can't use babel alone to compile Vue single file components(SFCs), since they are not valid JavaScript/ JSX and can't be parsed by babylon.

We either need to add support to parcel core, or create a parcel plugin, like https://github.com/lc60005457/parcel-plugin-vue.

[tom76kimo]

@eddyerburgh I see. Thanks.

[shawwn]

Soon! Come join us in Slack for status updates :)

…

On Thu, Jan 4, 2018 at 3:50 PM, scriptPilot ***@***.***> wrote: Looking forward to Vue support :-) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADo8FXvIOUGU13YUY6TVyYjAObPp0onks5tHUe0gaJpZM4Q2vn_> .

[znck]

Update:

vue-component-compiler is available for dev testing.

npm add https://github.com/vuejs/vue-component-compiler

Waiting for feedback.

[roblav96]

@jamiebuilds @davidnagli @laosb In my ~8 years on GitHub I've never seen comments deleted. lol Where's the transparency?

[pbastowski]

Guys, while the devs here keep working on improving parcel support for Vue, if you want zero configuration, you should also check out vue-cli 3. It provides zero config for VueJs at its best.

[roblav96]

@pbastowski That's perfect timing cause I just bailed on trying to get Vue working with parcel bundler. Thanks!

[swift1911]

Is there any planning to release the Vue support?

[DeMoorJasper]

@shawwn Any progress?

[padcom]

I suggest going with POI or vue-cli if proper Vue support is needed. Those are projects strictly targeted at Vue developers.

[scriptPilot]

Mhm, what a pity in my point of view ... Vue.js has a fast growing community and should be more essentiell in Parcel than others already included ... like json5 eg. So, what is the difficulty, how can we support?

[DeMoorJasper]

Anyone who feels like it's taking too long, feel free to dive into the branch started by Shawwn, it should be near finished, except for some cleanup and points probably already mentioned in here as response to his example.
Or feel free to get inspiration from it and/or start over from current master.

https://github.com/parcel-bundler/parcel/tree/vue

cc @scriptPilot

[roblav96]

@DeMoorJasper Idk why it wasn't merged back in January. You're only digging yourself deeper in technical debt.

[shff]

I believe @shawwn mentioned on Slack that Parcel needed Pug/Jade support before he could continue with this branch. It is being added in #769.

For those wanting to use the latest Parcel version, I'm using https://github.com/BoltDoggy/parcel-plugin-vue in one of my projects and everything seem to work fine. No issues so far, apart from the fact it has to inject CSS using JS, instead of compiling into CSS files.

[laosb]

Actually I have published a version based on Vue branch with removal of adding unnecessary dependencies on npm, called parcel-bundler-vue. Try it if you need.

[marcelkorpel]

Is it correct that at the moment the Vue branch doesn't create a correct build? I tried opening shawwn's proof of concept (which still needed vue as a dependency, but that doesn't change the case) using the vue branch as well as Iaosb's parcel-bundler-vue, but all I got is the contents of index.html in my live tree.

[devongovett]

Current Vue work is on #1052. It is very much WIP, but feel free to try it out. The more apps we test it against the better.

[devongovett]

#1052 is now merged, and will be released as part of v1.7.0 later this week! 🎉

[ehnba]

Is it just me, or due CSS modules not work as expected?

Like in this case for example:

// box.vue
<style module>
  .box {
    border: 1px solid black;
  }
</style>

// other_box.vue
<style module>
  .box {
    background-color: gray;
  }
</style>

It just doesn't work. Am I missing something or is this just not implemented yet?

[andrewbanchich]

@fraf I am guessing it doesn't work since it looks like modules are a vue-loader thing. The scoped keyword works for me since that's part of Vue itself.

[DeMoorJasper]

@frarf If you'd like to see this feature added, probably best to open up a seperate issue.

[PierBover]

Anyone knows if relative URLs of images in the <style> part of the component work?

So far everything is working for me except that. More info in this issue.

[Mouvedia]

@PierBover does it already support the ~ prefix used by @import?

[PierBover]

@Mouvedia apparently yes, but in the case of URLs of images in CSS of Vue components it doesn't seem to have any effect.

[burlesona]

@frarf I'm running into a similar problem that styles just don't work, for example the following produces no CSS in the browser.

<style lang="scss">
  .foo {
    color: red;
  }
</style>

There are no errors or anything else, and everything else about the vue components works as expected. Did you figure out a workaround or more helpfully how to debug this sort of thing? I'd love to investigate what's going on and contribute back a fix (if there is one), but I'm not even sure where to start...

[rambo-panda]

like #2199