Vue

Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. Parcel supports Vue automatically using the @parcel/transformer-vue plugin. When a .vue file is detected, it will be installed into your project automatically.

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

Example usage

index.html:

<!DOCTYPE html>
<div id="app"></div>
<script type="module" src="./index.js"></script>

index.js:

import { createApp } from "vue";
import App from "./App.vue";

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 official Vue SFC compiler, which supports HMR out of the box so you'll have a fast, reactive development experience. See Hot reloading for more details about HMR in Parcel.

Vue 3 Features

Since Parcel uses Vue 3, 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.vue";
  export default {
    components: {
      child: Child,
    },
    data() {
      let docs = { standard: Child.__docs, brief: Child.__docsBrief };
      return { docs };
    },
  };
</script>