15 changed files with 486 additions and 578 deletions
@@ -1,7 +1,5 @@
 # kontor-vue

-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
 This template should help get you started developing with Vue 3 in Vite.

 ## Recommended IDE Setup
@@ -12,25 +10,26 @@ This template should help get you started developing with Vue 3 in Vite.

 TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.

-## Project setup
-```
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
 npm install
 ```

-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lint with [ESLint](https://eslint.org/)
+### Compile and Hot-Reload for Development

 ```sh
-npm run lint
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
 ```

 ### Run Unit Tests with [Vitest](https://vitest.dev/)
@@ -54,3 +53,9 @@ But it's still recommended to test the production build with `test:e2e` before d
 npm run build
 npm run test:e2e
 ```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "esnext",
-    "baseUrl": "./",
-    "moduleResolution": "node",
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  }
-}
@@ -20,7 +20,7 @@
    "format": "prettier --write src/"
  },
  "dependencies": {
-    "pinia": "^3.0.3",
+    "bootstrap": "^5.3.7",
    "vue": "^3.5.18",
    "vue-router": "^4.5.1"
  },
@@ -29,7 +29,6 @@
    "@types/jsdom": "^21.1.7",
    "@types/node": "^22.16.5",
    "@vitejs/plugin-vue": "^6.0.1",
-    "@vitejs/plugin-vue-jsx": "^5.0.1",
    "@vitest/eslint-plugin": "^1.3.4",
    "@vue/eslint-config-prettier": "^10.2.0",
    "@vue/eslint-config-typescript": "^14.6.0",
@@ -1,17 +0,0 @@
-<!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>
@@ -1,4 +1,4 @@
-@import './base.css';
+@import 'bootstrap/dist/css/bootstrap.css';

 * {
    box-sizing: border-box;
@@ -0,0 +1,54 @@
+<template>
+  <nav class="navbar bg-body-tertiary">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">Navbar</a>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="/">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/about">Link</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a
+              class="nav-link dropdown-toggle"
+              href="#"
+              role="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              Dropdown
+            </a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><hr class="dropdown-divider" /></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+          </li>
+        </ul>
+        <form class="d-flex" role="search">
+          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
+          <button class="btn btn-outline-success" type="submit">Search</button>
+        </form>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style></style>
@@ -0,0 +1,16 @@
+<template>
+  <p class="muted">
+    Placeholder text to demonstrate some
+    <a href="/" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with
+    tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of
+    <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that
+    just to give you an idea of how tooltips would look when used in real-world situations. So
+    hopefully you've now seen how
+    <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too"
+      >these tooltips on links</a
+    >
+    can work in practice, once you use them on
+    <a href="/about" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or
+    project.
+  </p>
+</template>
@@ -1,4 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-
-createApp(App).mount('#app')
@@ -1,14 +1,12 @@
+import * as bootstrap from 'bootstrap/dist/js/bootstrap.bundle'
 import './assets/main.css'

 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-
 import App from './App.vue'
 import router from './router'

 const app = createApp(App)
-
-app.use(createPinia())
+app.provide('bootstrap', bootstrap)
 app.use(router)

 app.mount('#app')
@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})
@@ -2,14 +2,12 @@ import { fileURLToPath, URL } from 'node:url'

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'

 // https://vite.dev/config/
 export default defineConfig({
  plugins: [
    vue(),
-    vueJsx(),
    vueDevTools(),
  ],
  resolve: {
@@ -1,4 +0,0 @@
-const { defineConfig } = require('@vue/cli-service')
-module.exports = defineConfig({
-  transpileDependencies: true
-})