diff --git a/tech/Javascript.wiki b/tech/Javascript.wiki
index 3519d1b..51ac60b 100644
--- a/tech/Javascript.wiki
+++ b/tech/Javascript.wiki
@@ -9,6 +9,7 @@ See [[Node.js.wiki]] for the core runtime of backend js (node)
 
 See [[../tech/express.js.wiki]]
 See [[../tech/react.js.wiki]]
+See [[../tech/vue.js.wiki]]
 
 See [[jQuery]]
 
diff --git a/tech/vue.js.wiki b/tech/vue.js.wiki
new file mode 100644
index 0000000..d955757
--- /dev/null
+++ b/tech/vue.js.wiki
@@ -0,0 +1,49 @@
+= Vue.js =
+
+Vue.js is a front end reactive framework
+
+== Design ==
+
+Parts of the single page application are made of *components*.
+Components are pieces of an application that can be reused and placed together
+to build a full application. A component has a few typical parts
+
+{{{
+export myComponent {
+    data() {
+        return {
+            data1: 0,
+            data2: "string",
+            // etc...
+        }
+    },
+    methods: {
+        increment() {
+            this.data1++
+        }
+    }
+    computed: { //short had for accessing data, useful for building dom
+        strLen(){ //this will be called anytime that data2 is changed
+            return this.data2.length > 0 ? 'Full' : 'Empty'
+        }
+    }
+    mounted() { //this is basically a constructor
+        this.increment()
+    }
+}
+  }}}
+
+When you declare methods in the methods section, they will be accessible via
+`this`. If you use arrow syntax they will not be.
+
+Something else to not is *computed* functions are cached and do not need to be
+called constantly to update display. They will only be called when the data
+they depend on updates. Computed functions are also const, meaning they can
+only be used as getters
+
+== HTML Directives ==
+
+=== v-if ===
+
+`v-if` is used to conditionally render a block. The block is only rendered if
+the argument is truthy