Note: This page covers Parcel 1, the documentation for Parcel 2 is being worked on here:


Supported extensions: vue

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

<!-- index.html -->

<!DOCTYPE html>

<html lang="en">
    <title>Parcel - Vue</title>

    <div id="app"></div>
    <script src="./index.js"></script>

You can use all tools you like (Pug, TypeScript, SCSS, ...):

// App.vue

<template lang="pug">
  .container Hello {{bundler}}

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  data() {
    return {
      bundler: "Parcel"

<style lang="scss" scoped>
.container {
  color: green;
// index.js

import Vue from 'vue';
import App from './App.vue';

new Vue({ render: createElement => createElement(App) }).$mount('#app');

Help us improve the docs

If something is missing or not entirely clear, please file an issue on the website repository or edit this page.