Feature request: Vue components about parcel HOT 81 CLOSED

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

from parcel.

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!

from parcel.

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.

from parcel.

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

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

from parcel.

I could help build this in the new year

from parcel.

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.

from parcel.

Update:

vue-component-compiler is available for dev testing.

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

Waiting for feedback.

from parcel.

@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?

from parcel.

What happened? Why deleting so many comments?

from parcel.

from parcel.

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

from parcel.

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

from parcel.

@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...

from parcel.

@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.

from parcel.

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

from parcel.

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

from parcel.

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.

from parcel.

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

from parcel.

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.

from parcel.

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

from parcel.

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

from parcel.

@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.

from parcel.

Is there any planning to release the Vue support?

from parcel.

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

from parcel.

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

from parcel.

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

from parcel.

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

from parcel.

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

from parcel.

@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.

from parcel.

Cool, Jest also works perfectly!

from parcel.

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

from parcel.

@breadadams Brilliant! This is super helpful.

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

from parcel.

IMO, Jade and Pug are the same. 😅

from parcel.

@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.

from parcel.

@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 👍

from parcel.

@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.

from parcel.

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...

from parcel.

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

from parcel.

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?

from parcel.

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.

from parcel.

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.

from parcel.

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.

from parcel.

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.

from parcel.

@shawwn Are you also working on this?

from parcel.

how does @webpack implement this

from parcel.

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?

from parcel.

@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.

from parcel.

@eddyerburgh I see. Thanks.

from parcel.

@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. :)

from parcel.

@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).

from parcel.

Hi @znck

I opened an issue in vue-component-compiler's repo: vuejs/vue-component-compiler#51

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

Thanks!

from parcel.

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.

from parcel.

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

from parcel.

from parcel.

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.

from parcel.

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

from parcel.

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

src="./blah" support coming soon.

from parcel.

@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!

from parcel.

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

from parcel.

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 🎉

from parcel.

@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.

from parcel.

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.

from parcel.

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

from parcel.

@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.

from parcel.

History ➡️ pugjs/pug#2184

from parcel.

Somebody has example with pug?

from parcel.

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

from parcel.

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.

from parcel.

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.

from parcel.

@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.

Or they should use prepublishOnly instead.

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

from parcel.

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

from parcel.

@shawwn Any progress?

from parcel.

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

from parcel.

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.

from parcel.

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.

from parcel.

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?

from parcel.

@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.

from parcel.

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

from parcel.

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

from parcel.

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

from parcel.

like #2199

from parcel.