ParcelJS with VueJS Work Log

This post is over a year old, some of this information may be out of date.

Install Parcel

yarn global add parcel-bundler

yarn init -y

yarn add sass

yarn add postcss-modules autoprefixer

yarn add tailwindcss

package.json

  "scripts": {
    "dev": "parcel <your entry file>",
    "build": "parcel build <your entry file>"
  }

.postcssrc

{
  "plugins": {
    "tailwindcss":{},
    "autoprefixer": {}
  }
}

index.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

import "./index.scss";

new Vue({
  el: "#app",
  router,
  render: h => h(App)
});

index.scss

@tailwind base;

@tailwind components;

@tailwind utilities;

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view></router-view/>
  </div>
</template>

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

Reference

Building Vue.js Apps with Parcel - ignore parcel-plugin-vue