Update vue 2.7.16.

Follow create-vue v3.9.1. Update dependencies.
logue · Dec 25, 2023 · 3d1d1a4 · 3d1d1a4
1 parent da15ce2
commit 3d1d1a4
Show file tree

Hide file tree

Showing 9 changed files with 463 additions and 219 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.tsbuildinfo
 
 # Editor directories and files
 .vscode/*

diff --git a/README.md b/README.md
@@ -1,15 +1,15 @@
 # Vite + Vue 2 + TypeScript
 
+⚠ Important Notice: Vue 2 will reach End of Life (EOL) on December 31st, 2023.
+For this reason, we do not recommend using this template for new projects.
+See [Vue 2 LTS, EOL & Extended Support](https://v2.vuejs.org/lts/).
+
 <p align="center">
 <img src="https://user-images.githubusercontent.com/480173/157433672-3d896453-9689-45e2-bbef-d91b29d72c4b.png" alt="logo" width="300" height="300" />
 </p>
 
 ## Description
 
-⚠ Important Notice: Vue 2 will reach End of Life (EOL) on December 31st, 2023.
-For this reason, we do not recommend using this template for new projects.
-See [Vue 2 LTS, EOL & Extended Support](https://v2.vuejs.org/lts/).
-
 This template is for using Vue2 with TypeScript in Vite. Includes [vue-router](https://router.vuejs.org/) and [Vuex](https://vuex.vuejs.org/).
 
 In addition, [ESLint](https://eslint.org/), [Stylelint](https://stylelint.io/), and [Prettier](https://prettier.io/) are also included and are set to be executed automatically at runtime and commit.

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/package.json",
   "name": "vite-vue2-ts-starter",
   "description": "Vue2 TypeScript Startar project for Vite.",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "license": "MIT",
   "type": "module",
   "private": true,
@@ -30,43 +30,42 @@
     "build": "run-p type-check \"build-only {@}\" --",
     "build:analyze": "vite build --mode analyze",
     "build:clean": "rimraf dist",
-    "preview": "vite preview",
     "lint": "eslint . --fix --cache --cache-location ./node_modules/.vite/vite-plugin-eslint && prettier . -w -u",
     "lint:style": "stylelint \"./**/*.{css,sass,scss,htm,html,vue}\" --fix --cache-location ./node_modules/.vite/vite-plugin-stylelint && prettier \"./**/*.{css,sass,scss,htm,html,vue}\" -w -u",
+    "preview": "vite preview",
     "test:unit": "vitest",
-    "test:coverage": "vitest run --coverage",
     "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "type-check": "vue-tsc --build --force",
     "postinstall": "patch-package",
     "prepare": "husky install"
   },
   "dependencies": {
-    "@logue/vue2-helpers": "^2.2.1",
+    "@logue/vue2-helpers": "^2.2.2",
     "patch-package": "^8.0.0",
-    "vue": "^2.7.15",
+    "vue": "^2.7.16",
     "vue-router": "^3.6.5",
     "vuex": "^3.6.2",
     "vuex-persist": "^3.1.3"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.6.0",
+    "@rushstack/eslint-patch": "^1.6.1",
     "@tsconfig/node-lts": "^20.1.0",
     "@types/jsdom": "^21.1.6",
-    "@types/node": "^20.10.4",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@types/node": "^20.10.5",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@vitejs/plugin-vue2": "^2.3.1",
     "@vitest/coverage-c8": "^0.33.0",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/test-utils": "^1.3.5",
-    "@vue/tsconfig": "^0.4.0",
-    "eslint": "^8.55.0",
-    "eslint-config-standard-with-typescript": "^42.0.0",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^8.56.0",
+    "eslint-config-standard-with-typescript": "^43.0.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-n": "^16.4.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.5.0",
+    "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-tsdoc": "^0.2.17",
     "eslint-plugin-vue": "latest",
@@ -88,12 +87,12 @@
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-order": "^6.0.4",
     "typescript": "*",
-    "vite": "^5.0.8",
+    "vite": "^5.0.10",
     "vite-plugin-checker": "^0.6.2",
-    "vitest": "^1.0.4",
+    "vitest": "^1.1.0",
     "vue-eslint-parser": "^9.3.2",
     "vue-template-compiler": "^2.7.15",
-    "vue-tsc": "^1.8.25"
+    "vue-tsc": "^1.8.26"
   },
   "husky": {
     "hooks": {

diff --git a/src/App.vue b/src/App.vue
@@ -1,16 +1,22 @@
 <template>
-  <header>
-    <img :src="logo" class="logo vue" alt="Vue logo" width="125" height="125" />
-    <div class="wrapper">
-      <hello-world msg="vite-vue2-ts-starter" />
-      <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
-      </nav>
-    </div>
-    <main>
-      <router-view />
-    </main>
+  <div id="app">
+    <header>
+      <img
+        :src="logo"
+        class="logo vue"
+        alt="Vue logo"
+        width="125"
+        height="125"
+      />
+      <div class="wrapper">
+        <hello-world msg="vite-vue2-ts-starter" />
+        <nav>
+          <router-link to="/">Home</router-link>
+          <router-link to="/about">About</router-link>
+        </nav>
+      </div>
+    </header>
+    <router-view />
     <teleport to="head">
       <meta
         name="keyword"
@@ -22,7 +28,7 @@
         {{ jsonLd }}
       </component>
     </teleport>
-  </header>
+  </div>
 </template>
 
 <script lang="ts">

diff --git a/src/assets/main.css b/src/assets/main.css
@@ -4,7 +4,6 @@
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
-
   font-weight: normal;
 }
 
@@ -13,10 +12,24 @@ a,
   text-decoration: none;
   color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
+  padding: 3px;
 }
 
 @media (hover: hover) {
-  a:hover:not(:has(> img)) {
+  a:hover {
     background-color: hsla(160, 100%, 37%, 0.2);
   }
 }
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -5,6 +5,7 @@
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,
+    "noEmit": true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]

diff --git a/tsconfig.node.json b/tsconfig.node.json
@@ -11,6 +11,7 @@
   ],
   "compilerOptions": {
     "composite": true,
+    "noEmit": true,
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,

diff --git a/vite.config.ts b/vite.config.ts
@@ -26,7 +26,7 @@ export default defineConfig(({ command, mode }): UserConfig => {
       // https://github.com/fi3ework/vite-plugin-checker
       checker({
         typescript: true,
-        vueTsc: true,
+        // vueTsc: true,
         // eslint: {lintCommand: 'eslint'},
         // stylelint: {lintCommand: 'stylelint'},
       }),