ready to usage

.eslintrc.cjs

@@ -9,5 +9,9 @@ module.exports = {
   }],
   parserOptions: {
     ecmaVersion: 'latest'
+  },
+  rules: {
+    "vue/multi-word-component-names": "off",
+    "no-undef": "off"
   }
 };

README.md

@@ -1,4 +1,4 @@
-# Vue Monorepo for Startups
+# Vue Advanced Modular Architecture for Startups
 
 This template should help get you started developing with Vue 3 in Vite.
 
@@ -13,8 +13,8 @@ TypeScript cannot handle type information for `.vue` imports by default, so we r
 If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
 
 1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
 
 ## Customize configuration
@@ -66,8 +66,9 @@ npm run test:e2e
 ```sh
 npm run lint
 ```
+
 ### Run storybook with [Storybook](https://storybook.js.org/)
 
 ```sh
 npm run storybook
-```
+```

package.json

@@ -70,8 +70,5 @@
     "vitest": "^0.29.1",
     "vue-loader": "^16.8.3",
     "vue-tsc": "^1.2.0"
-  },
-  "workspaces": [
-    "./libs/ui"
-  ]
+  }
 }

src/App.vue

@@ -1,5 +1,4 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <RouterView />

src/app/examples/full/shared/index.ts

@@ -1 +1 @@
-export * from '../router';
+export * from '../router'

src/app/examples/full/stories/title.stories.mdx

@@ -1,22 +1,25 @@
-import Title from '../components/title.vue';
-import { Meta, Canvas, Story } from '@storybook/addon-docs';
+import Title from '../components/title.vue'
+import { Meta, Canvas, Story } from '@storybook/addon-docs'
 
 <Meta title="Example/Button" component={Title} />
 
 export const Template = (args) => ({
   components: { Title },
   setup() {
-    return { args };
+    return { args }
   },
-  template: '<Title v-bind="args" />',
-});
-
+  template: '<Title v-bind="args" />'
+})
 
 # Primary Button
+
 <Canvas>
-  <Story name="Primary" args={{
-    title: "Hello from title"
-  }}>
+  <Story
+    name="Primary"
+    args={{
+      title: 'Hello from title'
+    }}
+  >
     {Template.bind({})}
   </Story>
-</Canvas>
+</Canvas>

src/app/examples/minimal/__tests__/Counter.test.ts

@@ -0,0 +1,29 @@
+import Counter from '../components/counter.vue'
+import { mount, VueWrapper } from '@vue/test-utils'
+import { useExampleStore } from '../stores/example'
+
+describe('Example Counter', () => {
+  let wrapper: VueWrapper
+  let exampleStore: ReturnType<typeof useExampleStore>
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    wrapper = mount(Counter)
+    exampleStore = useExampleStore()
+  })
+
+  it('should render currectly', () => {
+    expect(wrapper.html()).toContain('0')
+  })
+
+  it('should increment', async () => {
+    exampleStore.increase()
+    await wrapper.find('[data-test="inc"]').trigger('click')
+    expect(wrapper.get('[data-test="result"]').text()).toBe('4')
+  })
+
+  it('should decrement', async () => {
+    exampleStore.decrease()
+    await wrapper.find('[data-test="dec"]').trigger('click')
+    expect(wrapper.get('[data-test="result"]').text()).toBe('4')
+  })
+})

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

@@ -12,14 +12,29 @@ const exampleStore = useExampleStore()
   >
     <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">
+      <ElButton
+        data-test="inc"
+        @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">
+      <div
+        data-test="result"
+        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">
+      <ElButton
+        data-test="dec"
+        @click="exampleStore.decrease()"
+        size="large"
+        type="danger"
+        class="w-44 shadow-md"
+      >
         <NIcon size="20"> <Minus /> </NIcon>
         <span>Minus</span>
       </ElButton>

src/assets/base.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

src/jsxIssue.d.ts

@@ -1,5 +1,6 @@
 declare namespace React {
   interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
     class?: string
+    dataTest?: string
   }
 }

src/main.ts

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

src/shims-vue.d.ts

@@ -2,4 +2,4 @@ declare module '*.vue' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>
   export default component
-}
+}

tsconfig.app.json

@@ -16,6 +16,11 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "types": ["element-plus/global", "vite-plugin-terminal/client", "naive-ui/volar"]
+    "types": [
+      "element-plus/global",
+      "vite-plugin-terminal/client",
+      "naive-ui/volar",
+      "vitest/globals"
+    ]
   }
 }

vite.config.ts

@@ -27,10 +27,11 @@ export default defineConfig({
       dts: true,
       imports: [
         'vue',
+        'vitest',
         {
           'virtual:terminal': ['terminal'],
           '@vueuse/core': ['useMouse'],
-          pinia: ['defineStore'],
+          pinia: ['defineStore', 'setActivePinia', 'createPinia'],
           'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar']
         }
       ],
@@ -48,5 +49,11 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  test: {
+    globals: true,
+    deps: {
+      inline: ['element-plus']
+    }
   }
 })

vitest.config.ts

@@ -10,6 +10,6 @@ export default mergeConfig(
       environment: 'jsdom',
       exclude: [...configDefaults.exclude, 'e2e/*'],
       root: fileURLToPath(new URL('./', import.meta.url))
-    }
+    },
   })
 )