Adding router-links

Padding and border defaults not implicitly defaulted

.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "plugin:prettier/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+};

.gitignore

@@ -1,9 +1,23 @@
-dist/
-node_modules/
 .DS_Store
-Pods/
+node_modules
-*.iml
+/dist
-.idea/
+
-.vscode/
+*~
-build/
+# local env files
-*.tgz
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,24 @@
+# kickstart-for-time-pwa
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

package.json

@@ -1,45 +1,42 @@
 {
-  "name": "capacitor-daily-notification",
+  "name": "kickstart-for-time-pwa",
-  "version": "0.0.1",
+  "version": "0.1.0",
-  "description": "Capacitor plugin for daily notifications with network content",
+  "private": true,
-  "main": "dist/plugin.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
   "scripts": {
-    "build": "npm run clean && tsc",
+    "serve": "vue-cli-service serve",
-    "clean": "rimraf ./dist",
+    "build": "vue-cli-service build",
-    "watch": "tsc --watch",
+    "lint": "vue-cli-service lint"
-    "prepublishOnly": "npm run build"
   },
-  "author": "Matthew Raymer",
-  "license": "MIT",
   "dependencies": {
-    "@capacitor/core": "^5.0.0"
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/vue-fontawesome": "^3.0.2",
+    "core-js": "^3.26.1",
+    "register-service-worker": "^1.7.2",
+    "vue": "^3.2.45",
+    "vue-class-component": "^8.0.0-0",
+    "vue-router": "^4.1.6",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "typescript": "^4.9.0",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "rimraf": "^3.0.2"
+    "@typescript-eslint/parser": "^5.44.0",
-  },
+    "@vue/cli-plugin-babel": "~5.0.8",
-  "peerDependencies": {
+    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@capacitor/core": "^5.0.0"
+    "@vue/cli-plugin-pwa": "~5.0.8",
-  },
+    "@vue/cli-plugin-router": "~5.0.8",
-  "files": [
+    "@vue/cli-plugin-typescript": "~5.0.8",
-    "dist/",
+    "@vue/cli-plugin-vuex": "~5.0.8",
-    "ios/",
+    "@vue/cli-service": "~5.0.8",
-    "android/",
+    "@vue/eslint-config-typescript": "^11.0.2",
-    "CapacitorDailyNotification.podspec"
+    "autoprefixer": "^10.4.13",
-  ],
+    "eslint": "^8.28.0",
-  "keywords": [
+    "eslint-config-prettier": "^8.5.0",
-    "capacitor",
+    "eslint-plugin-prettier": "^4.2.1",
-    "plugin",
+    "eslint-plugin-vue": "^9.8.0",
-    "native"
+    "postcss": "^8.4.19",
-  ],
+    "prettier": "^2.8.0",
-  "capacitor": {
+    "tailwindcss": "^3.2.4",
-    "ios": {
+    "typescript": "~4.9.3"
-      "src": "ios"
-    },
-    "android": {
-      "src": "android"
-    }
   }
-}
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

public/img/icons/safari-pinned-tab.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
+</svg>

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

src/App.vue

@@ -0,0 +1,5 @@
+<template>
+  <router-view />
+</template>
+
+<style></style>

src/assets/styles/tailwind.css

@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
+
+@layer base {
+    html {
+        font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
+    }
+}

src/components/HelloWorld.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br />
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
+        >vue-cli documentation</a
+      >.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+          target="_blank"
+          rel="noopener"
+          >babel</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
+          target="_blank"
+          rel="noopener"
+          >pwa</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
+          target="_blank"
+          rel="noopener"
+          >router</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
+          target="_blank"
+          rel="noopener"
+          >vuex</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+          target="_blank"
+          rel="noopener"
+          >eslint</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
+          target="_blank"
+          rel="noopener"
+          >typescript</a
+        >
+      </li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li>
+        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
+      </li>
+      <li>
+        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
+          >Forum</a
+        >
+      </li>
+      <li>
+        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
+          >Community Chat</a
+        >
+      </li>
+      <li>
+        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
+          >Twitter</a
+        >
+      </li>
+      <li>
+        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
+      </li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li>
+        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
+          >vue-router</a
+        >
+      </li>
+      <li>
+        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-devtools#vue-devtools"
+          target="_blank"
+          rel="noopener"
+          >vue-devtools</a
+        >
+      </li>
+      <li>
+        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
+          >vue-loader</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+          rel="noopener"
+          >awesome-vue</a
+        >
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  props: {
+    msg: String,
+  },
+})
+export default class HelloWorld extends Vue {
+  msg!: string;
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/definitions.ts

@@ -1,19 +0,0 @@
-export interface DailyNotificationPlugin {
-    initialize(options: DailyNotificationOptions): Promise<void>;
-    checkPermissions(): Promise<PermissionStatus>;
-    requestPermissions(): Promise<PermissionStatus>;
-  }
-  
-  export interface DailyNotificationOptions {
-    url: string;
-    notificationTime: string; // "HH:mm" format
-    title?: string;
-    body?: string;
-  }
-  
-  export interface PermissionStatus {
-    notifications: PermissionState;
-    backgroundRefresh?: PermissionState; // iOS only
-  }
-  
-  export type PermissionState = 'prompt' | 'prompt-with-rationale' | 'granted' | 'denied';

src/index.ts

@@ -1,10 +0,0 @@
-import { registerPlugin } from '@capacitor/core';
-
-import type { DailyNotificationPlugin } from './definitions';
-
-const DailyNotification = registerPlugin<DailyNotificationPlugin>('DailyNotification', {
-  web: () => import('./web').then(m => new m.DailyNotificationWeb()),
-});
-
-export * from './definitions';
-export { DailyNotification };

src/main.ts

@@ -0,0 +1,54 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import "./registerServiceWorker";
+import router from "./router";
+import store from "./store";
+
+import "./assets/styles/tailwind.css";
+
+import { library } from "@fortawesome/fontawesome-svg-core";
+import {
+  faChevronLeft,
+  faHouseChimney,
+  faMagnifyingGlass,
+  faFolderOpen,
+  faHand,
+  faCircleUser,
+  faCopy,
+  faShareNodes,
+  faQrcode,
+  faUser,
+  faPen,
+  faTrashCan,
+  faCalendar,
+  faEllipsisVertical,
+  faSpinner,
+  faCircleCheck,
+} from "@fortawesome/free-solid-svg-icons";
+
+library.add(
+  faChevronLeft,
+  faHouseChimney,
+  faMagnifyingGlass,
+  faFolderOpen,
+  faHand,
+  faCircleUser,
+  faCopy,
+  faShareNodes,
+  faQrcode,
+  faUser,
+  faPen,
+  faTrashCan,
+  faCalendar,
+  faEllipsisVertical,
+  faSpinner,
+  faCircleCheck
+);
+
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+createApp(App)
+  .component("fa", FontAwesomeIcon)
+  .use(store)
+  .use(router)
+  .mount("#app");

src/registerServiceWorker.ts

@@ -0,0 +1,34 @@
+/* eslint-disable no-console */
+
+import { register } from "register-service-worker";
+
+if (process.env.NODE_ENV === "production") {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready() {
+      console.log(
+        "App is being served from cache by a service worker.\n" +
+          "For more details, visit https://goo.gl/AFskqB"
+      );
+    },
+    registered() {
+      console.log("Service worker has been registered.");
+    },
+    cached() {
+      console.log("Content has been cached for offline use.");
+    },
+    updatefound() {
+      console.log("New content is downloading.");
+    },
+    updated() {
+      console.log("New content is available; please refresh.");
+    },
+    offline() {
+      console.log(
+        "No internet connection found. App is running in offline mode."
+      );
+    },
+    error(error) {
+      console.error("Error during service worker registration:", error);
+    },
+  });
+}

src/router/index.ts

@@ -0,0 +1,98 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+import HomeView from "../views/HomeView.vue";
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: "/",
+    name: "home",
+    component: HomeView,
+  },
+  {
+    path: "/about",
+    name: "about",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
+  },
+  {
+    path: "/start",
+    name: "start",
+    component: () =>
+      import(/* webpackChunkName: "start" */ "../views/StartView.vue"),
+  },
+  {
+    path: "/account",
+    name: "account",
+    component: () =>
+      import(/* webpackChunkName: "account" */ "../views/AccountViewView.vue"),
+  },
+  {
+    path: "/confirm-contact",
+    name: "confirm-contact",
+    component: () =>
+      import(
+        /* webpackChunkName: "confirm-contact" */ "../views/ConfirmContactView.vue"
+      ),
+  },
+  {
+    path: "/scan-contact",
+    name: "scan-contact",
+    component: () =>
+      import(
+        /* webpackChunkName: "scan-contact" */ "../views/ContactScanView.vue"
+      ),
+  },
+  {
+    path: "/discover",
+    name: "discover",
+    component: () =>
+      import(/* webpackChunkName: "discover" */ "../views/DiscoverView.vue"),
+  },
+  {
+    path: "/import-account",
+    name: "import-account",
+    component: () =>
+      import(
+        /* webpackChunkName: "import-account" */ "../views/ImportAccountView.vue"
+      ),
+  },
+  {
+    path: "/new-edit-account",
+    name: "new-edit-account",
+    component: () =>
+      import(
+        /* webpackChunkName: "new-edit-account" */ "../views/NewEditAccountView.vue"
+      ),
+  },
+  {
+    path: "/new-edit-commitment",
+    name: "new-edit-commitment",
+    component: () =>
+      import(
+        /* webpackChunkName: "new-edit-commitment" */ "../views/NewEditCommitmentView.vue"
+      ),
+  },
+  {
+    path: "/new-edit-project",
+    name: "new-edit-project",
+    component: () =>
+      import(
+        /* webpackChunkName: "new-edit-project" */ "../views/NewEditProjectView.vue"
+      ),
+  },
+  {
+    path: "/project",
+    name: "project",
+    component: () =>
+      import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;

src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/store/index.ts

@@ -0,0 +1,9 @@
+import { createStore } from "vuex";
+
+export default createStore({
+  state: {},
+  getters: {},
+  mutations: {},
+  actions: {},
+  modules: {},
+});

src/views/AboutView.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  components: {},
+})
+export default class AboutView extends Vue {}
+</script>

src/views/AccountViewView.vue

@@ -0,0 +1,163 @@
+<template>
+  <!-- QUICK NAV -->
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
+    <ul class="flex text-2xl p-2 gap-2">
+      <!-- Home Feed -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <a href="" class="block text-center py-3 px-1"
+          ><fa icon="house-chimney" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Search -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <a href="search.html" class="block text-center py-3 px-1"
+          ><fa icon="magnifying-glass" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Projects -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <a href="" class="block text-center py-3 px-1"
+          ><fa icon="folder-open" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Commitments -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <a href="" class="block text-center py-3 px-1"
+          ><fa icon="hand" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Profile -->
+      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
+        <a href="account-view.html" class="block text-center py-3 px-1"
+          ><fa icon="circle-user" class="fa-fw"></fa
+        ></a>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24">
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Your Identity
+    </h1>
+
+    <!-- Friend referral requirement notice -->
+    <div
+      class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
+    >
+      <p class="mb-4">
+        <b>Important:</b> before you can create a new project or commit time to
+        one, you need a friend to register you.
+      </p>
+      <button
+        id="btnShowQR"
+        class="inline-block text-md uppercase bg-amber-600 text-white px-4 py-2 rounded-md"
+      >
+        Share Your ID
+      </button>
+    </div>
+
+    <!-- Identity Details -->
+    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
+      <h2 class="text-xl font-semibold mb-2">Firstname Lastname</h2>
+
+      <div class="text-slate-500 text-sm font-bold">ID</div>
+      <div
+        class="text-sm text-slate-500 flex justify-between items-center mb-1"
+      >
+        <span
+          ><code>did:peer:kl45kj41lk451kl3</code>
+          <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa
+        ></span>
+        <span>
+          <button
+            class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"
+          >
+            <fa icon="share-nodes" class="fa-fw"></fa>
+          </button>
+          <button
+            class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md ml-1"
+          >
+            <fa icon="qrcode" class="fa-fw"></fa>
+          </button>
+        </span>
+      </div>
+
+      <div class="text-slate-500 text-sm font-bold">Public Key</div>
+      <div class="text-sm text-slate-500 mb-1">
+        <span
+          ><code>dyIgKepL19trfrFu5jzkoNhI</code>
+          <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa
+        ></span>
+      </div>
+
+      <div class="text-slate-500 text-sm font-bold">Derivation Path</div>
+      <div class="text-sm text-slate-500 mb-1">
+        <span
+          ><code>m/44'/0'/0'/0/0</code>
+          <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa
+        ></span>
+      </div>
+    </div>
+
+    <a
+      href="account-edit.html"
+      class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-8"
+      >Edit Identity</a
+    >
+
+    <h3 class="text-sm uppercase font-semibold mb-3">Contact Actions</h3>
+
+    <a
+      href="contact-scan.html"
+      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
+      >Scan New Contact</a
+    >
+
+    <h3 class="text-sm uppercase font-semibold mb-3">Identity Actions</h3>
+
+    <a
+      href=""
+      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+      >Backup Seed</a
+    >
+    <a
+      href=""
+      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
+      >Backup Other Data</a
+    >
+
+    <!-- QR code popup -->
+    <dialog id="dlgQR" class="backdrop:bg-black/75 rounded-md">
+      <form method="dialog">
+        <div class="text-slate-500 text-center">
+          <b>ID:</b> <code>did:peer:kl45kj41lk451kl3</code>
+        </div>
+        <img src="img/sample-qr-code.png" class="w-full mb-3" />
+
+        <button
+          value="cancel"
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+        >
+          Copy to Clipboard
+        </button>
+        <button
+          value="cancel"
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        >
+          Close
+        </button>
+      </form>
+    </dialog>
+  </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  components: {},
+})
+export default class AccountViewView extends Vue {}
+</script>

src/views/ConfirmContactView.vue

@@ -0,0 +1,57 @@
+<template>
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24">
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 class="text-lg text-center font-light relative px-7">
+        <!-- Cancel -->
+        <a
+          href="account-view.html"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          ><fa icon="chevron-left" class="fa-fw"></fa
+        ></a>
+
+        Confirm Contact
+      </h1>
+    </div>
+
+    <form>
+      <p class="text-center text-xl mb-4 font-light">
+        Would you like to add <i>Firstname</i> to your network?
+      </p>
+
+      <!-- Account Details -->
+      <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
+        <h2 class="text-xl font-semibold mb-2">Firstname Lastname</h2>
+
+        <div class="text-slate-500 text-sm font-bold">ID</div>
+        <div class="text-sm text-slate-500 mb-1">
+          <span><code>did:peer:kl45kj41lk451kl3</code></span>
+        </div>
+      </div>
+
+      <div class="mt-8">
+        <input
+          type="submit"
+          class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+          value="Add Contact"
+        />
+        <button
+          type="button"
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  components: {},
+})
+export default class ConfirmContactView extends Vue {}
+</script>

src/views/ContactScanView.vue

@@ -0,0 +1,96 @@
+<template>
+  <section id="Content" class="p-6 pb-24">
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 class="text-lg text-center font-light relative px-7">
+        <!-- Cancel -->
+        <a
+          href="account-view.html"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          ><fa icon="chevron-left" class="fa-fw"></fa
+        ></a>
+
+        Scan Contact
+      </h1>
+    </div>
+
+    <form>
+      <h3 class="text-sm uppercase font-semibold mb-2">Scan a QR Code…</h3>
+      <div class="bg-black rounded overflow-hidden relative mb-4">
+        <img src="https://picsum.photos/400/400?random=1" class="w-full" />
+
+        <!-- Darken overlay -->
+        <!-- Top -->
+        <div class="absolute top-0 left-0 right-0 bg-black/50 h-1/4"></div>
+        <!-- Reft -->
+        <div class="absolute top-1/4 bottom-1/4 left-0 bg-black/50 w-1/4"></div>
+        <!-- Right -->
+        <div
+          class="absolute top-1/4 bottom-1/4 right-0 bg-black/50 w-1/4"
+        ></div>
+        <!-- Bottom -->
+        <div class="absolute bottom-0 left-0 right-0 bg-black/50 h-1/4"></div>
+
+        <!-- Reticle overlay -->
+        <!-- Top-left -->
+        <div
+          class="absolute top-1/4 left-1/4 h-6 w-6 border-white border-t-4 border-l-4 drop-shadow"
+        ></div>
+        <!-- Top-right -->
+        <div
+          class="absolute top-1/4 right-1/4 h-6 w-6 border-white border-t-4 border-r-4 drop-shadow"
+        ></div>
+        <!-- Bottom-left -->
+        <div
+          class="absolute bottom-1/4 left-1/4 h-6 w-6 border-white border-b-4 border-l-4 drop-shadow"
+        ></div>
+        <!-- Bottom-right -->
+        <div
+          class="absolute bottom-1/4 right-1/4 h-6 w-6 border-white border-b-4 border-r-4 drop-shadow"
+        ></div>
+      </div>
+
+      <h3 class="text-sm uppercase font-semibold mb-2">
+        …or Enter Contact Data
+      </h3>
+      <input
+        type="text"
+        placeholder="Name (optional)"
+        class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
+      />
+      <input
+        type="text"
+        placeholder="ID"
+        class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
+      />
+      <input
+        type="text"
+        placeholder="Public Key (optional)"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      />
+
+      <div class="mt-8">
+        <input
+          type="submit"
+          class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+          value="Look Up Contact"
+        />
+        <button
+          type="button"
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  components: {},
+})
+export default class ContactScanView extends Vue {}
+</script>

src/views/DiscoverView.vue

@@ -0,0 +1,156 @@
+<template>
+  <!-- QUICK NAV -->
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
+    <ul class="flex text-2xl p-2 gap-2">
+      <!-- Home Feed -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <a href="" class="block text-center py-3 px-1"
+          ><fa icon="house-chimney" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Search -->
+      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
+        <a href="search.html" class="block text-center py-3 px-1"
+          ><fa icon="magnifying-glass" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Projects -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <a href="" class="block text-center py-3 px-1"
+          ><fa icon="folder-open" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Commitments -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <a href="" class="block text-center py-3 px-1"
+          ><fa icon="hand" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Profile -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <a href="account-view.html" class="block text-center py-3 px-1"
+          ><fa icon="circle-user" class="fa-fw"></fa
+        ></a>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24">
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Discover
+    </h1>
+
+    <!-- Quick Search -->
+    <form id="QuickSearch" class="mb-4 flex">
+      <input
+        type="text"
+        placeholder="Search…"
+        class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2"
+      />
+      <button
+        class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
+      >
+        <fa icon="magnifying-glass" class="fa-fw"></fa>
+      </button>
+    </form>
+
+    <!-- Result Tabs -->
+    <div class="text-center text-slate-500 border-b border-slate-300">
+      <ul class="flex flex-wrap justify-center gap-4 -mb-px">
+        <li>
+          <a
+            href="#"
+            class="inline-block py-3 rounded-t-lg border-b-2 active text-blue-600 border-blue-600 font-semibold"
+          >
+            Nearby
+            <span
+              class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
+              >20+</span
+            >
+          </a>
+        </li>
+        <li>
+          <a
+            href="#"
+            class="inline-block py-3 rounded-t-lg border-b-2 border-transparent hover:text-slate-600 hover:border-slate-300"
+          >
+            Remote
+            <span
+              class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
+              >13</span
+            >
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Results List -->
+    <ul class="">
+      <li class="border-b border-slate-300">
+        <a href="project-view.html" class="block py-4 flex gap-4">
+          <div class="w-12">
+            <img
+              src="https://picsum.photos/200/200?random=1"
+              class="w-full rounded"
+            />
+          </div>
+
+          <div class="grow">
+            <h2 class="text-base font-semibold">Canyon cleanup</h2>
+            <div class="text-sm">
+              <fa icon="user" class="fa-fw text-slate-400"></fa> Rotary
+            </div>
+          </div>
+        </a>
+      </li>
+
+      <li class="border-b border-slate-300">
+        <a href="project-view.html" class="block py-4 flex gap-4">
+          <div class="w-12">
+            <img
+              src="https://picsum.photos/200/200?random=2"
+              class="w-full rounded"
+            />
+          </div>
+
+          <div class="grow">
+            <h2 class="text-base font-semibold">Potluck with neighbors</h2>
+            <div class="text-sm">
+              <fa icon="user" class="fa-fw text-slate-400"></fa> Andrew A.
+            </div>
+          </div>
+        </a>
+      </li>
+
+      <li class="border-b border-slate-300">
+        <a href="project-view.html" class="block py-4 flex gap-4">
+          <div class="w-12">
+            <img
+              src="https://picsum.photos/200/200?random=3"
+              class="w-full rounded"
+            />
+          </div>
+
+          <div class="grow">
+            <h2 class="text-base font-semibold">Historical site</h2>
+            <div class="text-sm">
+              <fa icon="user" class="fa-fw text-slate-400 mr-1"></fa>
+              <em>Unknown</em>
+            </div>
+          </div>
+        </a>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  components: {},
+})
+export default class DiscoverView extends Vue {}
+</script>

src/views/HomeView.vue

@@ -0,0 +1,15 @@
+<template>
+  <section></section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
+
+@Options({
+  components: {
+    HelloWorld,
+  },
+})
+export default class HomeView extends Vue {}
+</script>

src/views/ImportAccountView.vue

@@ -0,0 +1,49 @@
+<template>
+  <section id="Content" class="p-6 pb-24">
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 class="text-lg text-center font-light relative px-7">
+        <!-- Cancel -->
+        <a
+          href="start.html"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          ><fa icon="chevron-left"></fa>
+        </a>
+        Import Existing Identity
+      </h1>
+    </div>
+    <!-- Import Account Form -->
+    <form>
+      <p class="text-center text-xl mb-4 font-light">
+        Enter your seed phrase below to import your identity on this device.
+      </p>
+      <input
+        type="text"
+        placeholder="Seed Phrase"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      />
+      <div class="mt-8">
+        <input
+          type="submit"
+          class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+          value="Import Identity"
+        />
+        <button
+          type="button"
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  components: {},
+})
+export default class ImportAccountView extends Vue {}
+</script>

src/views/NewEditAccountView.vue

@@ -0,0 +1,53 @@
+<template>
+  <section id="Content" class="p-6 pb-24">
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 class="text-lg text-center font-light relative px-7">
+        <!-- Cancel -->
+        <a
+          href="account-view.html"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          ><fa icon="chevron-left" class="fa-fw"></fa>
+        </a>
+        [New/Edit] Identity
+      </h1>
+    </div>
+    <form>
+      <input
+        type="text"
+        placeholder="First Name"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      />
+      <input
+        type="text"
+        placeholder="Last Name"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      />
+
+      <div class="mt-8">
+        <button
+          type="button"
+          class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+        >
+          Save Changes
+        </button>
+        <!-- SHOW ME instead while processing saving changes -->
+        <button
+          type="button"
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  components: {},
+})
+export default class NewEditAccountView extends Vue {}
+</script>

src/views/NewEditCommitmentView.vue

@@ -0,0 +1,70 @@
+<template>
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24">
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 class="text-lg text-center font-light relative px-7">
+        <!-- Cancel -->
+        <a
+          href="project-view.html"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          ><fa icon="chevron-left" class="fa-fw"></fa>
+        </a>
+
+        Make Commitment
+      </h1>
+    </div>
+
+    <!-- Project Details -->
+    <form>
+      <select
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      >
+        <option disabled>Choose a commitment type…</option>
+        <option selected>Time</option>
+        <option>Cryptocurrency</option>
+        <option>Money</option>
+      </select>
+
+      <!-- Time amount -->
+      <div class="mb-4 flex items-stretch">
+        <input
+          type="number"
+          placeholder="0.0"
+          class="block w-full rounded-l border border-slate-400 px-3 py-2"
+        />
+        <span
+          class="px-4 py-2 rounded-r bg-slate-200 border border-l-0 border-slate-400"
+          >hours</span
+        >
+      </div>
+
+      <!-- Crypto amount -->
+
+      <!-- Money amount -->
+
+      <div class="mt-8">
+        <input
+          type="submit"
+          class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+          value="Commit"
+        />
+        <button
+          type="button"
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        >
+          Maybe Later
+        </button>
+      </div>
+    </form>
+  </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  components: {},
+})
+export default class NewEditCommitmentView extends Vue {}
+</script>

src/views/NewEditProjectView.vue

@@ -0,0 +1,78 @@
+<template>
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24">
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 class="text-lg text-center font-light relative px-7">
+        <!-- Cancel -->
+        <a
+          href="project-view.html"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          ><fa icon="chevron-left" class="fa-fw"></fa>
+        </a>
+
+        [New/Edit] Project
+      </h1>
+    </div>
+
+    <!-- Project Details -->
+    <form>
+      <!-- Image - (see design model) Empty -->
+
+      <!-- Image - Populated -->
+      <div class="relative mb-4 rounded-md overflow-hidden">
+        <div class="absolute top-3 right-3 flex gap-2">
+          <button
+            class="text-md font-bold uppercase bg-blue-600 text-white px-3 py-2 rounded"
+          >
+            <fa icon="pen" class="fa-fw"></fa>
+          </button>
+          <button
+            class="text-md font-bold uppercase bg-red-600 text-white px-3 py-2 rounded"
+          >
+            <fa icon="trash-can" class="fa-fw"></fa>
+          </button>
+        </div>
+        <img src="https://picsum.photos/800/400" class="w-full" />
+      </div>
+
+      <input
+        type="text"
+        placeholder="Project Name"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      />
+
+      <textarea
+        placeholder="Description"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+        rows="5"
+      ></textarea>
+      <div class="text-xs text-slate-500 italic -mt-3 mb-4">
+        88/500 max. characters
+      </div>
+
+      <div class="mt-8">
+        <input
+          type="submit"
+          class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+          value="Save Project"
+        />
+        <button
+          type="button"
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  components: {},
+})
+export default class NewEditProjectView extends Vue {}
+</script>

src/views/ProjectViewView.vue

@@ -0,0 +1,129 @@
+<template>
+  <!-- QUICK NAV -->
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
+    <ul class="flex text-2xl p-2 gap-2">
+      <!-- Home Feed -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <a href="" class="block text-center py-3 px-1"
+          ><fa icon="house-chimney" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Search -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <a href="search.html" class="block text-center py-3 px-1"
+          ><fa icon="magnifying-glass" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Projects -->
+      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
+        <a href="" class="block text-center py-3 px-1"
+          ><fa icon="folder-open" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Commitments -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <a href="" class="block text-center py-3 px-1"
+          ><fa icon="hand" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Profile -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <a href="account-view.html" class="block text-center py-3 px-1"
+          ><fa icon="circle-user" class="fa-fw"></fa
+        ></a>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24">
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 class="text-lg text-center font-light relative px-7">
+        <!-- Back -->
+        <a href="" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          ><fa icon="chevron-left" class="fa-fw"></fa
+        ></a>
+        <!-- Context Menu -->
+        <a
+          href=""
+          class="text-lg text-center px-2 py-1 absolute -right-2 -top-1"
+          ><fa icon="ellipsis-vertical" class="fa-fw"></fa
+        ></a>
+
+        View Project
+      </h1>
+    </div>
+
+    <!-- Project Details -->
+    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
+      <!-- Image -->
+      <div class="-mx-4 -mt-3 mb-3">
+        <img src="https://picsum.photos/800/400" class="w-full" />
+      </div>
+
+      <div>
+        <h2 class="text-xl font-semibold">Canyon cleanup</h2>
+        <div class="flex justify-between gap-4 text-sm mb-3">
+          <span><fa icon="user" class="fa-fw text-slate-400"></fa> Rotary</span>
+          <span
+            ><fa icon="calendar" class="fa-fw text-slate-400"></fa> 8 days
+            ago</span
+          >
+        </div>
+
+        <div class="text-sm text-slate-500">
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium…
+          <a href="" class="uppercase text-xs font-semibold text-slate-700"
+            >Read More</a
+          >
+        </div>
+      </div>
+    </div>
+
+    <!-- Commit -->
+    <a
+      href="commitment-edit.html"
+      class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-8"
+      >Make Commitment</a
+    >
+
+    <!-- Commitments -->
+    <div class="bg-slate-100 px-4 py-3 rounded-md">
+      <h3 class="text-sm uppercase font-semibold mb-3">Commitments</h3>
+
+      <ul class="text-sm border-t border-slate-300">
+        <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
+          <span>[Username]</span>
+          <span
+            >5 hours <fa icon="spinner" class="fa-fw text-slate-400"></fa
+          ></span>
+        </li>
+
+        <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
+          <span>[Username]</span>
+          <span
+            >US$ 20.00 <fa icon="circle-check" class="fa-fw text-lime-500"></fa
+          ></span>
+        </li>
+
+        <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
+          <span>[Username]</span>
+          <span
+            >0.1 BTC <fa icon="spinner" class="fa-fw text-slate-400"></fa
+          ></span>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  components: {},
+})
+export default class ProjectViewView extends Vue {}
+</script>

src/views/StartView.vue

@@ -0,0 +1,37 @@
+<template>
+  <section
+    id="Content"
+    class="p-6 pb-24 min-h-screen flex flex-col justify-center"
+  >
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Start Here
+    </h1>
+
+    <div class="mt-8">
+      <p class="text-center text-xl mb-4 font-light">
+        Do you already have an identity to import?
+      </p>
+      <router-link
+        :to="{ name: 'new-edit-account' }"
+        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+      >
+        No
+      </router-link>
+      <router-link
+        :to="{ name: 'import-account' }"
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        >Yes</router-link
+      >
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  components: {},
+})
+export default class StartView extends Vue {}
+</script>

src/web.ts

@@ -1,45 +0,0 @@
-import { WebPlugin } from '@capacitor/core';
-
-import type { DailyNotificationPlugin, DailyNotificationOptions, PermissionStatus } from './definitions';
-
-export class DailyNotificationWeb extends WebPlugin implements DailyNotificationPlugin {
-  async initialize(options: DailyNotificationOptions): Promise<void> {
-    console.warn('DailyNotification.initialize() is not implemented on web');
-    return;
-  }
-
-  async checkPermissions(): Promise<PermissionStatus> {
-    if ('Notification' in window) {
-      const status = await Notification.permission;
-      return {
-        notifications: this.mapWebPermission(status),
-      };
-    }
-    return {
-      notifications: 'denied',
-    };
-  }
-
-  async requestPermissions(): Promise<PermissionStatus> {
-    if ('Notification' in window) {
-      const status = await Notification.requestPermission();
-      return {
-        notifications: this.mapWebPermission(status),
-      };
-    }
-    return {
-      notifications: 'denied',
-    };
-  }
-
-  private mapWebPermission(permission: NotificationPermission): PermissionState {
-    switch (permission) {
-      case 'granted':
-        return 'granted';
-      case 'denied':
-        return 'denied';
-      default:
-        return 'prompt';
-    }
-  }
-}

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.vue"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

vue.config.js

@@ -0,0 +1,4 @@
+const { defineConfig } = require("@vue/cli-service");
+module.exports = defineConfig({
+  transpileDependencies: true,
+});