diff --git a/.eslintrc.yml b/.eslintrc.yml
index cd00aad..d0b06fc 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -1,4 +1,7 @@
 extends:
   - "plugin:vue/vue3-recommended"
   - "plugin:vue/base"
+  - "eslint:recommended"
+  - "@vue/typescript"
+  - prettier
 rules: {}
diff --git a/.prettierrc.yml b/.prettierrc.yml
new file mode 100644
index 0000000..356bb43
--- /dev/null
+++ b/.prettierrc.yml
@@ -0,0 +1,4 @@
+trailingComma: "none"
+tabWidth: 4
+semi: false
+singleQuote: true
diff --git a/package-lock.json b/package-lock.json
index 210d37f..54bb9fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "vapara-vue3",
-  "version": "0.0.10",
+  "version": "0.0.15",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -72,6 +72,31 @@
         "js-yaml": "^3.13.1",
         "minimatch": "^3.0.4",
         "strip-json-comments": "^3.1.1"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+          "dev": true
+        },
+        "espree": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
+          "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==",
+          "dev": true,
+          "requires": {
+            "acorn": "^7.4.0",
+            "acorn-jsx": "^5.3.1",
+            "eslint-visitor-keys": "^1.3.0"
+          }
+        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "dev": true
+        }
       }
     },
     "@nodelib/fs.scandir": {
@@ -142,6 +167,18 @@
         "eslint-utils": "^2.0.0"
       }
     },
+    "@typescript-eslint/parser": {
+      "version": "4.15.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.15.2.tgz",
+      "integrity": "sha512-SHeF8xbsC6z2FKXsaTb1tBCf0QZsjJ94H6Bo51Y1aVEZ4XAefaw5ZAilMoDPlGghe+qtq7XdTiDlGfVTOmvA+Q==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/scope-manager": "4.15.2",
+        "@typescript-eslint/types": "4.15.2",
+        "@typescript-eslint/typescript-estree": "4.15.2",
+        "debug": "^4.1.1"
+      }
+    },
     "@typescript-eslint/scope-manager": {
       "version": "4.15.2",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.15.2.tgz",
@@ -296,6 +333,15 @@
         }
       }
     },
+    "@vue/eslint-config-typescript": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-7.0.0.tgz",
+      "integrity": "sha512-UxUlvpSrFOoF8aQ+zX1leYiEBEm7CZmXYn/ZEM1zwSadUzpamx56RB4+Htdjisv1mX2tOjBegNUqH3kz2OL+Aw==",
+      "dev": true,
+      "requires": {
+        "vue-eslint-parser": "^7.0.0"
+      }
+    },
     "@vue/eslint-plugin": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@vue/eslint-plugin/-/eslint-plugin-4.2.0.tgz",
@@ -754,6 +800,48 @@
         "table": "^6.0.4",
         "text-table": "^0.2.0",
         "v8-compile-cache": "^2.0.3"
+      },
+      "dependencies": {
+        "espree": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
+          "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==",
+          "dev": true,
+          "requires": {
+            "acorn": "^7.4.0",
+            "acorn-jsx": "^5.3.1",
+            "eslint-visitor-keys": "^1.3.0"
+          },
+          "dependencies": {
+            "eslint-visitor-keys": {
+              "version": "1.3.0",
+              "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+              "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+              "dev": true
+            }
+          }
+        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-config-prettier": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.1.0.tgz",
+      "integrity": "sha512-oKMhGv3ihGbCIimCAjqkdzx2Q+jthoqnXSP+d86M9tptwugycmTFdVR4IpLgq2c4SHifbwO90z2fQ8/Aio73yw==",
+      "dev": true
+    },
+    "eslint-plugin-prettier": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.1.tgz",
+      "integrity": "sha512-Rq3jkcFY8RYeQLgk2cCwuc0P7SEFwDravPhsJZOQ5N4YI4DSg50NyqJ/9gdZHzQlHf8MvafSesbNJCcP/FF6pQ==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
       }
     },
     "eslint-plugin-vue": {
@@ -802,14 +890,14 @@
       "dev": true
     },
     "espree": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
-      "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
+      "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
       "dev": true,
       "requires": {
-        "acorn": "^7.4.0",
-        "acorn-jsx": "^5.3.1",
-        "eslint-visitor-keys": "^1.3.0"
+        "acorn": "^7.1.1",
+        "acorn-jsx": "^5.2.0",
+        "eslint-visitor-keys": "^1.1.0"
       },
       "dependencies": {
         "eslint-visitor-keys": {
@@ -883,6 +971,12 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
@@ -1030,14 +1124,6 @@
         "ignore": "^5.1.4",
         "merge2": "^1.3.0",
         "slash": "^3.0.0"
-      },
-      "dependencies": {
-        "ignore": {
-          "version": "5.1.8",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-          "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
-          "dev": true
-        }
       }
     },
     "has": {
@@ -1074,9 +1160,9 @@
       "dev": true
     },
     "ignore": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
+      "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
       "dev": true
     },
     "import-fresh": {
@@ -1452,6 +1538,15 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
+    },
     "progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@@ -1756,9 +1851,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.2.tgz",
-      "integrity": "sha512-tbb+NVrLfnsJy3M59lsDgrzWIflR4d4TIUjz+heUnHZwdF7YsrMTKoRERiIvI2lvBG95dfpLxB21WZhys1bgaQ=="
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.5.tgz",
+      "integrity": "sha512-6OSu9PTIzmn9TCDiovULTnET6BgXtDYL4Gg4szY+cGsc3JP1dQL8qvE8kShTRx1NIw4Q9IBHlwODjkjWEtMUyA=="
     },
     "uniq": {
       "version": "1.0.1",
@@ -1857,17 +1952,6 @@
           "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
           "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
           "dev": true
-        },
-        "espree": {
-          "version": "6.2.1",
-          "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
-          "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
-          "dev": true,
-          "requires": {
-            "acorn": "^7.1.1",
-            "acorn-jsx": "^5.2.0",
-            "eslint-visitor-keys": "^1.1.0"
-          }
         }
       }
     },
diff --git a/package.json b/package.json
index 7231b8b..bd1e1e1 100644
--- a/package.json
+++ b/package.json
@@ -5,19 +5,23 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "linter": "eslint \"src/**/*.{js,ts,vue}\" --ignore-pattern \"*.d.ts\""
+    "linter": "eslint --ext .js,.ts,.vue --ignore-pattern \"*.d.ts\" src"
   },
   "dependencies": {
-    "typescript": "4.x",
+    "typescript": "4.1.x",
     "vue": "3.x"
   },
   "devDependencies": {
     "@types/node": "^14.14.31",
     "@typescript-eslint/eslint-plugin": "^4.15.2",
+    "@typescript-eslint/parser": "^4.15.2",
     "@vitejs/plugin-vue": "^1.1.5",
     "@vue/compiler-sfc": "3.x",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/eslint-plugin": "^4.2.0",
     "eslint": "^7.21.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.6.0",
     "vite": "^2.0.4"
   }
diff --git a/src/App.vue b/src/App.vue
index 2515895..7df31b0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,33 +1,32 @@
 <template>
-  <img
-    alt="Vue logo" 
-    src="./assets/logo.png"
-    width="150"
-  >
-  <HelloWorld :msg="title" />
-  <br>
-  AGPLv3 :   
-  <a
-    :href="origin"
-    alt="origin"
-  >
-    {{ version }}
-  </a>
+    <img alt="Vue logo" src="./assets/logo.png" width="150" />
+    <HelloWorld :msg="title" />
+    <HelloWorldSfc :msg="title" />
+    <br />
+    AGPLv3 :
+    <a :href="origin" alt="origin">
+        {{ version }}
+    </a>
 </template>
 
 <script lang="ts">
-import HelloWorld from "./components/HelloWorld.vue";
+/* standard composition api */
+/* eslint-disable no-undef */
+
+import HelloWorld from './components/HelloWorld.vue'
+import HelloWorldSfc from './components/HelloWorldSfc.vue'
 export default {
-  name: "App",
-  components: {
-    HelloWorld,
-  },
-  data() {
-    return {
-      title: APP_TITLE,
-      version: APP_VERSION,
-      origin: APP_ORIGIN,
-    };
-  },
-};
+    name: 'App',
+    components: {
+        HelloWorld,
+        HelloWorldSfc
+    },
+    setup() {
+        return {
+            title: APP_TITLE,
+            version: APP_VERSION,
+            origin: APP_ORIGIN
+        }
+    }
+}
 </script>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 4f15b16..dd5c09a 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,26 +1,25 @@
 <template>
   <h1>{{ msg }}</h1>
-  <button @click="count++">
-    count is: {{ count }}
-  </button>
-  <button @click="inc">
-    inc
-  </button>
+  <button @click="count++">count is: {{ count }}</button>
+  <button @click="inc">inc</button>
   <p>Hello World!</p>
 </template>
 
 <script lang="ts">
+/* standard composition api */
+
+import { ref } from "vue";
+
 export default {
-  name: "HelloWorld",
   props: {
     msg: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
-  data() {
+  setup() {
     return {
-      count: 0,
+      count: ref(1),
     };
   },
   methods: {
diff --git a/src/components/HelloWorldSfc.vue b/src/components/HelloWorldSfc.vue
new file mode 100644
index 0000000..63e6576
--- /dev/null
+++ b/src/components/HelloWorldSfc.vue
@@ -0,0 +1,36 @@
+<template>
+  <h1>{{ msg }}</h1>
+  <button @click="count++">
+    count is: {{ count }}
+  </button>
+  <button @click="inc">
+    inc
+  </button>
+  <p>Hello World!</p>
+</template>
+
+<script lang="ts">
+/* standard composition api */
+
+import { ref } from 'vue'
+
+export default {
+  props: {
+       msg: {
+      type: String,
+      required: true
+    }
+  },
+  setup() {
+    return {
+        count: ref(1)
+    }
+  },
+  methods: {
+    inc() {
+      console.log("increment count");
+      this.count++;
+    },
+  },
+};
+</script>
diff --git a/src/main.ts b/src/main.ts
index 06b0351..b086574 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,8 @@ import App from './App.vue'
 import './index.css'
 
 // define title and version from package.json
+// eslint-disable-next-line no-undef
 document.title = APP_TITLE
 
+
 createApp(App).mount('#app')