- update dependencies

- add example env and mode test (staging)
- add shims-vue.d.ts (define ts file in vue files)

.env

@@ -0,0 +1 @@
+VITE_TEST=Test String

.env.staging

@@ -0,0 +1 @@
+VITE_TEST=Staging Test String

auto-imports.d.ts

@@ -42,7 +42,6 @@ declare global {
   const it: typeof import('vitest')['it']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
-  const mock: typeof import('vitest')['mock']
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
@@ -69,12 +68,10 @@ declare global {
   const readonly: typeof import('vue')['readonly']
   const ref: typeof import('vue')['ref']
   const refDefault: typeof import('@vueuse/core')['refDefault']
+  const resolveComponent: typeof import('vue')['resolveComponent']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
-  const sinon: typeof import('vitest')['sinon']
-  const spy: typeof import('vitest')['spy']
-  const stub: typeof import('vitest')['stub']
   const suite: typeof import('vitest')['suite']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const templateRef: typeof import('@vueuse/core')['templateRef']
@@ -206,6 +203,8 @@ declare global {
   const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
   const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
   const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const vi: typeof import('vitest')['vi']
+  const vitest: typeof import('vitest')['vitest']
   const watch: typeof import('vue')['watch']
   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
   const watchEffect: typeof import('vue')['watchEffect']

package.json

@@ -2,34 +2,36 @@
   "private": true,
   "scripts": {
     "dev": "vite --port 3333 --open",
+    "staging": "vite --port 3333 --mode staging --open",
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext=.ts,.vue",
     "test": "vitest"
   },
   "dependencies": {
-    "@vueuse/core": "^7.4.0",
+    "@vueuse/core": "^7.4.1",
     "axios": "^0.24.0",
+    "lodash": "^4.17.21",
     "vue": "^3.2.26",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.14.0",
+    "@antfu/eslint-config": "^0.14.2",
     "@iconify-json/carbon": "^1.0.12",
-    "@types/node": "^17.0.1",
+    "@types/node": "^17.0.5",
     "@unocss/reset": "^0.16.4",
     "@vitejs/plugin-vue": "^2.0.1",
-    "@vue/test-utils": "^2.0.0-rc.17",
+    "@vue/test-utils": "^2.0.0-rc.18",
     "eslint": "^8.5.0",
     "jsdom": "^19.0.0",
-    "pnpm": "^6.24.2",
+    "pnpm": "^6.24.3",
     "typescript": "^4.5.4",
     "unocss": "^0.16.4",
-    "unplugin-auto-import": "^0.5.3",
+    "unplugin-auto-import": "^0.5.5",
-    "unplugin-vue-components": "^0.17.9",
+    "unplugin-vue-components": "^0.17.11",
-    "vite": "^2.7.3",
+    "vite": "^2.7.7",
-    "vite-plugin-pages": "^0.19.5",
+    "vite-plugin-pages": "^0.19.8",
     "vitest": "^0.0.99"
   }
 }

src/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_TEST: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

src/pages/index.vue

@@ -6,6 +6,9 @@ const go = () => {
   if (name.value)
     router.push(`/hi/${encodeURIComponent(name.value)}`)
 }
+
+const testEnv = import.meta.env.VITE_TEST
+const initNum = 1
 </script>
 
 <template>
@@ -21,11 +24,12 @@ const go = () => {
     </p>
 
     <div py-4 />
-
+    <Counter :initial="initNum" />
+    <div py-4 />
     <input
       id="input"
       v-model="name"
-      placeholder="What's your name?"
+      :placeholder="testEnv"
       type="text"
       autocomplete="false"
       p="x-4 y-2"

src/shims-vue.d.ts

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