example page created

README.md

@@ -1,4 +1,4 @@
-# vue-monorepo
+# Vue Monorepo for Startups
 
 This template should help get you started developing with Vue 3 in Vite.
 
@@ -66,3 +66,8 @@ npm run test:e2e
 ```sh
 npm run lint
 ```
+### Run storybook with [Storybook](https://storybook.js.org/)
+
+```sh
+npm run storybook
+```

config/dirs.ts

@@ -1,4 +1,4 @@
 // ./src/app/{path}/shared
-export const RootDirs: string[] = ['dashboard', 'examples/full', 'examples/minimal'].map(
+export const RootDirs: string[] = ['examples/full', 'examples/minimal'].map(
   (dir) => `./src/app/${dir}/shared`
 )

cypress/e2e/example.cy.ts

@@ -3,6 +3,6 @@
 describe('My First Test', () => {
   it('visits the app root url', () => {
     cy.visit('/')
-    cy.contains('h1', 'You did it!')
+    cy.contains('span', 'Counter Example')
   })
 })

package.json

@@ -38,6 +38,7 @@
     "@types/jsdom": "^21.1.0",
     "@types/node": "^18.14.2",
     "@types/react": "^18.0.28",
+    "@vicons/fluent": "^0.12.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@vue/eslint-config-prettier": "^7.1.0",
@@ -53,6 +54,7 @@
     "eslint-plugin-storybook": "^0.6.11",
     "eslint-plugin-vue": "^9.9.0",
     "jsdom": "^21.1.0",
+    "naive-ui": "^2.34.3",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.1.0",
@@ -62,6 +64,7 @@
     "typescript": "~4.8.4",
     "unplugin-auto-import": "^0.15.1",
     "unplugin-vue-components": "^0.24.1",
+    "vfonts": "^0.0.3",
     "vite": "^4.1.4",
     "vite-plugin-terminal": "^1.1.0",
     "vitest": "^0.29.1",

src/app/examples/minimal/components/counter.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import Add from '@vicons/fluent/Add12Filled'
+import Minus from '@vicons/fluent/Subtract12Filled'
+import { useExampleStore } from '../stores/example'
+
+const exampleStore = useExampleStore()
+</script>
+
+<template>
+  <div
+    class="w-full h-screen flex flex-col items-center justify-center gap-10 bg-slate-100 select-none"
+  >
+    <slot />
+    <div class="max-w-4xl flex items-center justify-around bg-white rounded-md shadow-md p-4">
+      <ElButton @click="exampleStore.increase()" size="large" type="success" class="w-44 shadow-md">
+        <NIcon size="20"> <Add /> </NIcon>
+        <span>Add</span>
+      </ElButton>
+      <div class="min-w-[170px] px-8 text-7xl font-bold text-slate-400 text-center">
+        {{ exampleStore.counter_square }}
+      </div>
+      <ElButton @click="exampleStore.decrease()" size="large" type="danger" class="w-44 shadow-md">
+        <NIcon size="20"> <Minus /> </NIcon>
+        <span>Minus</span>
+      </ElButton>
+    </div>
+  </div>
+</template>

src/app/examples/minimal/example.vue

@@ -1,3 +1,17 @@
+<script setup lang="ts">
+import Counter from './components/counter.vue'
+import { useExampleStore } from './stores/example'
+
+const exampleStore = useExampleStore()
+</script>
+
 <template>
-  <div>Example template</div>
-</template>
+  <Counter>
+    <div class="text-center flex flex-col gap-2 text-slate-500">
+      <span class="text-6xl font-bold">Counter Example</span>
+      <span class="text-lg font-semibold italic"
+        >Number converting to scuare real number is {{ exampleStore.count }}</span
+      >
+    </div>
+  </Counter>
+</template>

src/app/examples/minimal/router.ts

@@ -2,14 +2,14 @@ import type { RouterOptions } from 'vue-router'
 
 export const RouteName: RouterOptions['routes'] = [
   {
-    path: '/example',
+    path: '/',
     name: 'example',
     component: () => import('./layouts/default.vue'),
     children: [
       {
         path: '/',
         name: 'example-children',
-        component: () => import('./views/index.vue')
+        component: () => import('./example.vue')
       }
     ]
   }

src/app/examples/minimal/stores/example.ts

@@ -1,7 +1,20 @@
 export const useExampleStore = defineStore('example', {
   state() {
-    return {}
+    return {
+      count: 0
+    }
   },
-  getters: {},
-  actions: {}
+  getters: {
+    counter_square(state) {
+      return state.count * state.count
+    }
+  },
+  actions: {
+    increase(num: number = 1) {
+      return (this.count += num)
+    },
+    decrease(num: number = 1) {
+      return (this.count -= num)
+    }
+  }
 })

src/main.ts

@@ -4,6 +4,7 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import "./assets/base.css";
+import 'vfonts/Lato.css';
 
 const app = createApp(App)
 

src/router/index.ts

@@ -1,9 +1,9 @@
-import { DashboardRouter } from '@/app/dashboard'
+import { RouteName } from '@/app/examples/minimal/router'
 import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [...DashboardRouter]
+  routes: [...RouteName]
 })
 
 export default router