From b4099363fed4a8851fa58839cbd9d532573f3885 Mon Sep 17 00:00:00 2001
From: MarcZierle <online@marczierle.com>
Date: Wed, 5 Jan 2022 15:34:16 +0100
Subject: [PATCH] first commit

---
 docs/components/testcomponent.md | 14 +++++++++
 docs/index.html                  | 19 ++++++++++++
 index.html                       | 52 ++++++++++++++++++++++++++++++++
 testcomponent.vue                | 31 +++++++++++++++++++
 4 files changed, 116 insertions(+)
 create mode 100644 docs/components/testcomponent.md
 create mode 100644 docs/index.html
 create mode 100644 index.html
 create mode 100644 testcomponent.vue
diff --git a/docs/components/testcomponent.md b/docs/components/testcomponent.md
new file mode 100644
index 0000000..97b8825
--- /dev/null
+++ b/docs/components/testcomponent.md
@@ -0,0 +1,14 @@
+# testcomponent
+
+just some sample code...
+
+## Methods
+
+<!-- @vuese:testcomponent:methods:start -->
+|Method|Description|Parameters|
+|---|---|---|
+|clear|clears something|-|
+
+<!-- @vuese:testcomponent:methods:end -->
+
+
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..298aeed
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Sample Components in Vue</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute@4/dist/docute.css">
+  </head>
+  <body>
+    <div id="docute"></div>
+    <script src="https://cdn.jsdelivr.net/npm/docute@4/dist/docute.js"></script>
+    <script>
+      new Docute({
+        target: '#docute',
+        sidebar: JSON.parse('[{&#34;title&#34;:&#34;Sample Components&#34;,&#34;links&#34;:[{&#34;title&#34;:&#34;testcomponent&#34;,&#34;link&#34;:&#34;/components/testcomponent&#34;}]}]'.replace(/\&\#34\;/g, '"'))
+      })
+    </script>
+  </body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cffa2cb
--- /dev/null
+++ b/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="https://unpkg.com/vue@next"></script>
+    </head>
+
+    <body>
+        <div id="app">
+            <h2>{{ title }}</h2>
+            <input :value="title" @input="title = $event.target.value" >
+            <input v-model="count" type="number" >
+            <button @click="increment">Up</button>
+            <button @click="decrement">Down</button>
+        </div>
+
+        <script>
+            const app = Vue.createApp({
+                data() {
+                    return {
+                        title: "Hi there",
+                        count: 4,
+                        headingColor: 'some'
+                    }
+                },
+                watch: {
+                    count() {
+                        console.log(this.count)
+                    }
+                },
+                methods: {
+                    increment() {
+                        this.count++
+                    },
+                    decrement() {
+                        this.count--
+                    },
+                    isEven() {
+                        return this.count % 2 === 0
+                    }
+                }
+            })
+
+            const vm = app.mount('#app')
+        </script>
+
+        <style>
+            .even {
+                color: pink;
+            }
+        </style>
+    </body>
+</html>
\ No newline at end of file
diff --git a/testcomponent.vue b/testcomponent.vue
new file mode 100644
index 0000000..a8ca1e7
--- /dev/null
+++ b/testcomponent.vue
@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <h1>{{ title }}</h1>
+    </div>
+</template>
+
+<script>
+    // @group Sample Components
+    // just some sample code...
+    export default {
+        data() {
+            return {
+                // the title of the pages
+                title: "Hello"
+            }
+        },
+        methods: {
+            // @vuese
+            // clears something
+            clear() {
+                return true
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    h1 {
+        color: red;
+    }
+</style>
\ No newline at end of file
