project setup

src/App.vue

@@ -0,0 +1,18 @@
+<script lang="ts"  >
+import {RouterView} from 'vue-router';
+import {Options, Vue} from 'vue-class-component';
+
+@Options({
+  name: 'App',
+  components: {
+    RouterView,
+  },
+})
+export default class App extends Vue {
+}
+
+</script>
+
+<template>
+  <RouterView/>
+</template>

src/components/__tests__/HelloWorld.spec.ts

@@ -0,0 +1,11 @@
+// import {describe, expect, it} from 'vitest';
+//
+// import {mount} from '@vue/test-utils';
+// import HelloWorld from '../HelloWorld.vue';
+//
+// describe('HelloWorld', () => {
+//   it('renders properly', () => {
+//     const wrapper = mount(HelloWorld, {props: {msg: 'Hello Vitest'}});
+//     expect(wrapper.text()).toContain('Hello Vitest');
+//   });
+// });

src/main.ts

@@ -0,0 +1,12 @@
+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.use(router);
+
+app.mount('#app');

src/router/index.ts

@@ -0,0 +1,23 @@
+import {createRouter, createWebHistory} from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      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('../views/AboutView.vue'),
+    },
+  ],
+});
+
+export default router;

src/views/AboutView.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

src/views/HomeView.vue

@@ -0,0 +1,13 @@
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+
+@Options({
+  name: 'HomeView',
+})
+export default class HomeView extends Vue {
+}
+</script>
+
+<template>
+  main
+</template>