Hook up Vue.js

.nvmrc

+13.8

gulpfile.js

@@ -8,6 +8,16 @@ var gulp = require("gulp"),
   browserSync = require("browser-sync").create(),
   argv = require("minimist")(process.argv.slice(2));
 
+const vue = require('rollup-plugin-vue');
+const rollup = require('@rollup/stream');
+const buble = require('@rollup/plugin-buble');
+const commonjs = require('@rollup/plugin-commonjs');
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const replace = require('@rollup/plugin-replace');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+const addsrc = require('gulp-add-src');
+const concat = require('gulp-concat');
 const postcss = require("gulp-postcss");
 const tailwindcss = require("tailwindcss");
 const rename = require("gulp-rename");
@@ -23,6 +33,7 @@ const postcssPurgecss = require("@fullhuman/postcss-purgecss")({
   defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
 });
 
+
 function resolvePath(pathInput) {
   return path.resolve(pathInput).replace(/\\/g, "/");
 }
@@ -263,7 +274,9 @@ function rebuild(done) {
 function watch () {
   const jsPaths = [
     resolvePath(paths().source.js) + "/*.js",
+    resolvePath(paths().source.js) + "/*.vue",
     resolvePath(paths().source.js) + "/**/*.js",
+    resolvePath(paths().source.js) + "/**/*.vue",
   ];
   const postcssPaths = [
     resolvePath(paths().source.css) + "/*.pcss",
@@ -274,7 +287,7 @@ function watch () {
   gulp.watch(
     jsPaths,
     {useFsEvents: false},
-    gulp.series("pl-copy:js", reloadJS)
+    gulp.series("rollup:build", reloadJS)
   );
 
   // Detect postcss file changes
@@ -354,6 +367,40 @@ gulp.task(
   }
 );
 
+gulp.task('rollup:build', function () {
+  return rollup({
+    plugins: [
+      vue({ css: false }),
+      buble(),
+      commonjs(),
+      nodeResolve({
+        extensions: ['.js', '.vue'],
+        browser: true,
+        preferBuiltins: true
+      }),
+      replace({
+        'process.env.NODE_ENV': JSON.stringify('development'),
+      })
+    ],
+    input: resolvePath(paths().source.js) + "/main.js",
+    output: {
+      format: "iife",
+    },
+  })
+  .on('bundle', bundle => { rollupCache = bundle })
+  .pipe(source("main.bundle.js"))
+  .pipe(buffer())
+  .pipe(addsrc.prepend([
+    './node_modules/vue/dist/vue.js'
+  ]))
+  // .pipe(concat("main.bundle.js"))
+  .pipe(gulp.dest("./public/js"));
+})
+
+gulp.task('rollup:watch', function () {
+
+});
+
 /******************************************************
  * COMPOUND TASKS
  ******************************************************/
@@ -361,5 +408,5 @@ gulp.task("default", gulp.series("tailwind-postcss:build:production"));
 gulp.task("patternlab:watch", gulp.series("tailwind-postcss:build", watch));
 gulp.task(
   "patternlab:serve",
-  gulp.series("tailwind-postcss:build", "patternlab:connect", watch)
+  gulp.series("tailwind-postcss:build", "patternlab:connect", "rollup:build", watch)
 );

package.json

@@ -3,7 +3,6 @@
   "description": "The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.",
   "version": "1.3.4",
   "dependencies": {
-    "acorn": "^7.1.1",
     "browser-sync": "^2.26.7",
     "gulp": "^4.0.2",
     "kind-of": "^6.0.3",
@@ -12,7 +11,9 @@
     "patternlab-node": "^2.12.0",
     "styleguidekit-assets-default": "^3.0.0",
     "styleguidekit-mustache-default": "^3.0.0",
-    "tailwindcss-elevation": "^0.3.4"
+    "tailwindcss-elevation": "^0.3.4",
+    "vue": "^2.6.11",
+    "vue2-flip-countdown": "^0.10.0"
   },
   "resolutions": {
     "lodash": "^4.17.12"
@@ -42,8 +43,16 @@
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^1.3.0",
+    "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-commonjs": "^13.0.0",
+    "@rollup/plugin-node-resolve": "^8.1.0",
+    "@rollup/plugin-replace": "^2.3.3",
+    "@rollup/stream": "^1.0.0",
+    "acorn": "^6.4.1",
     "autoprefixer": "^9.5.1",
     "color": "^3.1.2",
+    "gulp-add-src": "^1.0.0",
+    "gulp-concat": "^2.6.1",
     "gulp-postcss": "^8.0.0",
     "gulp-rename": "^2.0.0",
     "postcss-assets": "^5.0.0",
@@ -52,8 +61,13 @@
     "postcss-import": "^12.0.1",
     "postcss-nested": "^4.2.1",
     "postcss-preset-env": "^6.7.0",
+    "rollup": "^2.18.1",
+    "rollup-plugin-vue": "^5.1.9",
     "tailwind-css-variables": "^2.0.3",
     "tailwindcss": "^1.4.6",
-    "tailwindcss-typography": "^3.1.0"
+    "tailwindcss-typography": "^3.1.0",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0",
+    "vue-template-compiler": "^2.6.11"
   }
 }

source/_meta/_01-foot.mustache

@@ -2,7 +2,7 @@
   <!--DO NOT REMOVE-->
   {{{ patternLabFoot }}}
 
-  <script src="../../js/main.js?{{ cacheBuster }}"></script>
+  <script src="../../js/main.bundle.js?{{ cacheBuster }}"></script>
 
   </body>
 </html>

source/_patterns/03-templates/homepage.mustache

@@ -11,6 +11,10 @@
     </nav>
   </section>
 
+  <section id="countdown">
+    <flip-countdown deadline="2020-12-25 00:00:00"></flip-countdown>
+  </section>
+
   <section class="py-16">
     {{> molecules-calendar }}
   </section>

source/js/FlipClock.vue

+<template>
+  <flip-countdown deadline="2020-12-25 00:00:00"></flip-countdown>
+</template>
+
+<script>
+import Vue from "vue";
+import FlipCountdown from 'vue2-flip-countdown';
+
+export default {
+  components: { FlipCountdown }
+}
+</script>

source/js/main.js

-document.addEventListener('DOMContentLoaded', function () {
+import Vue from "vue";
+import FlipClock from "./FlipClock.vue";
+
 
+
+document.addEventListener('DOMContentLoaded', function () {
+  new Vue({
+    el: '#countdown',
+    render: h => h(FlipClock)
+  })
 });