Vue

Note that Parcel does not support using SFCs with Vue 2, you must use Vue 3 beta or later.

Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. Parcel supports Vue without the need for any additional configuration.

index.html: 
<!DOCTYPE html>
<div id="app"></div>
<script src="./index.js"></script>
index.js: 
import { createApp } from "vue";
import App from "./App";

const app = createApp(App);
app.mount("#app");
App.vue: 
<template>
  <div>Hello {{ name }}!</div>
</template>

<script>
  export default {
    data() {
      return {
        name: "Vue",
      };
    },
  };
</script>

HMR

Parcel uses the same HMR injection as the official vue-loader for Webpack, so you'll have a fast, reactive development experience.

Vue 3 Features

Since Parcel uses the latest Vue 3 beta, you can use all Vue 3 features, such as the Composition API.

App.vue: 
<template>
  <button @click="increment">
    Count is: {{ state.count }} Double is: {{
    state.double }}
  </button>
</template>

<script>
  import { reactive, computed } from "vue";

  export default {
    setup() {
      const state = reactive({
        count: 0,
        double: computed(() => state.count * 2),
      });

      function increment() {
        state.count++;
      }

      return {
        state,
        increment,
      };
    },
  };
</script>

Language Support

Parcel supports JavaScript, TypeScript, and CoffeeScript as scripting languages in Vue.

Almost any templating language (all those supported by consolidate) can be used.

For styling, Less, Sass, and Stylus are supported. In addition, CSS Modules and scoped style can be used with the module and scoped modifiers.

App.vue: 
<style lang="scss" scoped>
  /* This style will only apply to this module */
  $red: red;
  h1 {
    background: $red;
  }
</style>

<style lang="less">
  @green: green;
  h1 {
    color: @green;
  }
</style>

<style src="./App.module.css">
  /* The content of blocks with a `src` attribute is ignored and replaced with
   the content of `src`. */
</style>

<template lang="pug"> div h1 This is the app </template>

<script lang="coffee">
  module.exports =
    data: ->
      msg: 'Hello from coffee!'
</script>

Custom Blocks

You can use custom blocks in your Vue components, but must configure Vue with .vuerc, vue.config.js, etc. to define how you will preprocess those blocks.

.vuerc: 
{
  "customBlocks": {
    "docs": "./src/docs-preprocessor.js"
  }
}
src/docs-preprocessor.js: 
export default function (component, blockContent, blockAttrs) {
  if (blockAttrs.brief) {
    component.__briefDocs = blockContent;
  } else {
    component.__docs = blockContent;
  }
}
HomePage.vue: 
<template>
  <div>Home Page</div>
</template>

<docs> This component represents the home page of the application. </docs>

<docs brief> Home Page </docs>
App.vue: 
<template>
  <div>
    <child></child>
    docs: {{ docs.standard }} in brief: {{
    docs.brief }}
  </div>
</template>

<script>
  import Child from "./HomePage";
  export default {
    components: {
      child: Child,
    },
    data() {
      let docs = { standard: Child.__docs, brief: Child.__docsBrief };
      return { docs };
    },
  };
</script>