Parcel: 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: https://github.com/vuejs/vue-component-compiler/issues/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.

https://github.com/vuejs/vue-component-compiler/issues/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 [e-mail]
wrote:

Looking forward to Vue support :-)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/parcel-bundler/parcel/issues/5#issuecomment-355408974,
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._

[shawwn]

@znck Got it, thanks! I ran into a minor bug, so I'll submit a PR for it soon.

If you want to hop into our slack (slack.parceljs.org) it'll be a bit easier to give feedback in real time. Otherwise, stay tuned. :)

[shawwn]

@znck Actually, I have a few questions about the new Vue compiler. Do you have time to hop into Slack and ping me? (I'm @shawwn).

[shawwn]

Hi @znck

I opened an issue in vue-component-compiler's repo: https://github.com/vuejs/vue-component-compiler/issues/51

Do you happen to know what happened to the hot reload API (or how to use it)?

Thanks!

[shawwn]

Vue support is now ready for beta testing.

To try it out, install yarn globally (brew install yarn or npm install -g yarn), then run:

yarn global add vue-cli
vue init shawwn/parcel-simple vue-example

Follow the prompts, then run cd vue-example && yarn && yarn dev.

Navigate to http://localhost:1234 and you should see a page like this:

Now open src/App.vue and make some changes:

You'll see the results in your browser instantly:

To turn this into a git repo, run:

git init .
git add .
git commit -m "Initial commit"

From here, you should be able to follow along with the Vue tutorials.

NOTE: You must use import foo from 'bar' syntax, not var foo = require('bar').

So for example, this example from Vue's plugin documentation:

// When using CommonJS via Browserify or Webpack
var Vue = require('vue')
var VueRouter = require('vue-router')

// Don't forget to call this
Vue.use(VueRouter)

... should be written like this:

// When using CommonJS via Browserify or Webpack
import Vue from 'vue'
import VueRouter from 'vue-router'

// Don't forget to call this
Vue.use(VueRouter)

Everything else should function as expected. If you feel surprised by something, let me know. The goal was to make this nearly identical to vue-loader / browserify.

caveat: Jade support isn't implemented yet.

All of the following forms work correctly:

<style lang="scss">
</style>
<style lang="less">
</style>
<style lang="stylus">
</style>
<style scoped>
</style>
<script lang="coffee">
</style>

Note that you can use any language that Parcel supports.

If you spot any bugs or have requests, feel free to post them here or message me in Slack.

Have fun!

[Mouvedia]

You must use import foo from 'bar' syntax, not var foo = require('bar').

IIRC you have to use require for the img src attribute value when using Webpack and single file components. What's your take on that ?

caveat: Jade support isn't implemented yet.

Damn.

[Toilal]

Does it support lang="ts" in scripts for TypeScript ? Thanks for this awesome work, i'll try asap :)

[shawwn]

@Toilal Yep, TypeScript works! I just ran the Hello.vue typescript example from here: https://github.com/Microsoft/TypeScript-Vue-Starter#typescript-vue-starter

Here's how you'd modify the vue init shawwn/parcel-simple starter project to run it:

<!-- ./src/Hello.vue -->
<template>
    <div>
        <div class="greeting">Hello {{name}}{{exclamationMarks}}</div>
        <button @click="decrement">-</button>
        <button @click="increment">+</button>
    </div>
</template>

<script lang="ts">

/* Let's make a pointless class to test out TypeScript declarations. */
class Local {
  a: number;
  b: number;

  constructor(a: number, b: number) {
    this.a = a;
    this.b = b;
  }
}

export default {
  name: 'hello-component',
    props: ['name', 'initialEnthusiasm'],
    data() {
        return {
            enthusiasm: this.initialEnthusiasm,
        }
    },
    methods: {
        increment() { this.enthusiasm += this.count(); },
        decrement() {
            if (this.enthusiasm > 1) {
                this.enthusiasm--;
            }
        },
        count() {
          let local = new Local(1, 2);
          return local.a + local.b;
        },
    },
    computed: {
        exclamationMarks(): string {
            return Array(this.enthusiasm + 1).join('!');
        }
    }
}
</script>

<style>
.greeting {
    font-size: 20px;
}
</style>

<!-- ./src/App.vue -->
<template>
  <div id="app">
    <div>
        Name: <input v-model="name" type="text">
        <hello-component :name="name" :initialEnthusiasm="5" />
    </div>
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
import HelloComponent from './Hello.vue'
export default {
  name: 'app',
  components: { HelloComponent },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      name: 'World',
    }
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

P.S. For some reason, I can't get typescript to throw any type errors. I can assign strings to variables expecting only numbers, or pass arrays into functions that take only string arguments. I played around with require('typescript').transpileModule in a node REPL and saw the same behavior.

Is there some way to make typescript throw errors for invalid type assignments? Hmm.

[shawwn]

@Mouvedia The vue compiler automatically transpiles <img src="./assets/logo.png"> to:

_c('img', {
    attrs: {
      "src": require("./assets/logo.png")
    }
  })

So require is automatic – no need to write it yourself for image sources.

[ghost]

Cool, Jest also works perfectly!

[shawwn]

Awesome! Thanks for testing.

Do you want to set up an example repo with Jest? Then I could create a vue init template based off it.

On Sat, Jan 20, 2018 at 10:26 AM, Rokker Ruslan [e-mail]
wrote:

Cool, Jest also works perfectly!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/parcel-bundler/parcel/issues/5#issuecomment-359183366,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AADo8G7rUReiJFSHRvo5rYB3NkCRdQe7ks5tMhO7gaJpZM4Q2vn_
.

[corocn]

Is it working correctly when lang and scoped defined?

<style scoped>
#app { color: red; }
</style>

then add lang="scss"

<style lang="scss" scoped>
#app { color: red; }
</style>

It does not look like scoped applied.

[shawwn]

@corocn ah, good catch. I'll fix this.

[Toilal]

it should also support special '>>>' selector to apply a global style into a scoped style tag.

[znck]

@Toilal support for >>> is included in vue-component-compiler so it would be available for parcel too.

[ghost]

@shawwn https://github.com/RokkerRuslan/parcel-vue-jest like this?

[breadadams]

My 2 cents: I couldn't seem to get asset separation working

[shawwn]

@breadadams thanks for this. I didn't implement <script src="./my-component.js"></script>, only <script>/* actual contents */</script>.

src="./blah" support coming soon.

[shawwn]

@RokkerRuslan Yes, thank you. I updated the Vue branch and submitted a PR to your repo using the latest code. Could you merge + verify it works?

Nice work!

[breadadams]

Awesome @shawwn, here are a couple of other things to look out for (I couldn't get these working when _I_ tried to implement Vue + Parcel):

• src on template/src/style (as mentioned above)
• Using assets within <template> & <style>. For example a {background-image: url('../../assets/img/logo.png');} in a single-file component's <style> would render a {background-image: url('localhost:1234/assets/img/logo.png');}, and therefore not be loaded.
• Autoprefixer on <style> styles

[shawwn]

@breadadams Brilliant! This is super helpful.

Could you set up a repo illustrating the autoprefixer issue? The rest I can figure out.

[breadadams]

Just gave Autoprefixer a test in your template @shawwn and it _appears_ to be working! Via the following steps (similar to these):

1. Initial steps here
2. yarn add postcss-modules autoprefixer --dev
3. Create .postcssrc:

{
  "plugins": {
    "autoprefixer": {...config}
  }
}

// or

{
  "plugins": ["autoprefixer"]
}

Voila, Autoprefixer toggles on/off in HMR via adding/removing the _"auto..._ line 🎉

[shawwn]

@breadadams So just to be clear, I can disregard what you said earlier about autoprefixer?

(Sorry, just getting a list of bugs together; just asking whether there's any work left to do with autoprefixer.)

Thanks again for testing this.

[breadadams]

Correct @shawwn, all is good with Autoprefixer (from what I've tested so far) - and by that means, _anything_ related to postcss config being interpreted upon css bundling should work too.

[scriptPilot]

Tested successfully with Framework7-Vue - looking forward to have it in the NPM module :-)

[pbastowski]

@shawwn is lang=“pug” supported yet?

I saw your earlier comment about jade not being supported yet, which is why I ask about pug. Thanks.

[gluons]

IMO, Jade and Pug are the same. 😅

[pbastowski]

@gluons yes and no. Jade is the old spec with an old npm package and no longer supported. Pug is the new spec with a new npm package and has continuing support, which is why the differentiation.

[Mouvedia]

@pbastowski when they were obligated to change their name they released the then planned Jade 2.0 which had breaking changes, nevertheless colloquially Jade is Pug.

[gluons]

History ➡️ pugjs/pug#2184

[ghost]

Somebody has example with pug?

[Mouvedia]

@RokkerRuslan https://vue-loader.vuejs.org/en/configurations/pre-processors.html#templates

[rowanu]

@shawwn I'm using your parcel-bundler/parcel#vue branch to install parcel in my project (following the config in your shawwn/parcel-simple project), and somehow it's installing a bunch of Vue-related dependencies in my project (e.g. vue-route, vuex, vue-router-sync) - maybe via pre/post scripts? The installation happens when I run parcel index.htm for the first time. Anyone else seen this?

The actual compilation of Vue components works as expected 👍

[NemoAlex]

@rowanu Same to me.
These packages are defined here:
https://github.com/parcel-bundler/parcel/blob/vue/src/assets/VueAsset.js#L9
I think it's wrong to install them automatically since not everyone need vuex and vue-router.

[pbastowski]

I agree. There is no need to install vuex or vue-router. Those who need either package should install it themselves.

I have noticed a glitch, where an HMR update is not pushed properly and the browser is not updated, but I haven't been able to reliably reproduce it...

[breadadams]

Those should probably be moved to the parcel template for vue-cli (ie. shawwn/parcel-simple), if they're going to be included at all.

[scriptPilot]

Is there any planning to release the Vue support soon?
Is there any specific support needed?

[rowanu]

Found another issue: The prepare script breaks if you don't have yarn installed, but yarn isn't installed as a dependency by parcel. The prepare script is run on an npm install command, so either it needs to stop using yarn, or yarn needs to be added to parcel's dependencies.

[jbrodriguez]

I don't use yarn, i'm fine with npm, please don't make yarn a dependency

[gluons]

@RokkerRuslan @jbrodriguez

I think it's because of prepublish script:

prepublish: Run BEFORE the package is packed and published, as well as on local npm install without any arguments.

Since [email protected], the npm CLI has run the prepublish script for both npm publish and npm install

This should be changed to npm run build.
https://github.com/parcel-bundler/parcel/blob/d37932725a08045e8f2ba4c6f47841127d12694c/package.json#L84

Or they should use prepublishOnly instead.

prepublishOnly: Run BEFORE the package is prepared and packed, ONLY on npm publish.

[laosb]

parcel#vue works fine for me except adding unnecessary dependencies. Please do avoid them.

[laosb]

What happened? Why deleting so many comments?

[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! 🎉

[frarf]

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 https://github.com/parcel-bundler/parcel/issues/2199