fix: update dependencies and switch eslint config

.env

@@ -0,0 +1,3 @@
+NODE_ENV=production
+
+VITE_APP_NAME=Application

.eslintignore

@@ -0,0 +1,2 @@
+dist
+public

.eslintrc.js

@@ -1,20 +1,3 @@
 module.exports = {
-  root: true,
+  extends: '@antfu',
-  env: {
-    node: true,
-  },
-  extends: [
-    "plugin:vue/essential",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/prettier",
-  ],
-  parserOptions: {
-    ecmaVersion: 2020,
-    parser: "@typescript-eslint/parser",
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-  },
 }

.gitignore

@@ -1,3 +1,4 @@
+components.d.ts
 
 # Created by https://www.toptal.com/developers/gitignore/api/vue,node,macos,windows,linux,vscode,intellij+all
 # Edit at https://www.toptal.com/developers/gitignore?templates=vue,node,macos,windows,linux,vscode,intellij+all
@@ -210,7 +211,6 @@ typings/
 .yarn-integrity
 
 # dotenv environment variables file
-.env
 .env.test
 .env*.local
 

package.json

@@ -4,34 +4,28 @@
     "postinstall": "husky install",
     "dev": "vite",
     "build": "vite build",
-    "lint": "eslint './src/**/*.{js,ts,tsx,vue,md}'",
+    "lint": "eslint \"**/*.{vue,ts,js}\"",
-    "lint:fix": "eslint './src/**/*.{js,ts,tsx,vue,md}' --fix"
+    "lint:fix": "eslint \"**/*.{vue,ts,js}\" --fix"
   },
   "dependencies": {
-    "@vue/composition-api": "^1.2.4",
+    "@vue/composition-api": "^1.4.4",
-    "@vueuse/core": "^6.5.3",
+    "@vueuse/core": "^7.5.5",
-    "core-js": "^3.18.3",
+    "core-js": "^3.20.3",
     "vue": "^2.6.14",
-    "vue-demi": "^0.11.4",
+    "vue-demi": "^0.12.1",
-    "vue-router": "^3.5.2"
+    "vue-router": "^3.5.3"
   },
   "devDependencies": {
-    "@iconify/json": "^1.1.415",
+    "@antfu/eslint-config": "^0.16.0",
-    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@iconify/json": "^2.0.29",
-    "@typescript-eslint/parser": "^5.0.0",
+    "eslint": "^8.7.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
+    "husky": "^7.0.4",
-    "@vue/eslint-config-typescript": "^8.0.0",
+    "typescript": "^4.5.5",
-    "eslint": "^8.0.1",
+    "unplugin-icons": "^0.13.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "unplugin-vue-components": "^0.17.14",
-    "eslint-plugin-vue": "^7.19.1",
+    "vite": "^2.7.13",
-    "husky": "^7.0.2",
+    "vite-plugin-vue2": "^1.9.3",
-    "prettier": "2.2.1",
+    "vite-plugin-windicss": "^1.6.3",
-    "typescript": "^4.4.4",
-    "unplugin-icons": "^0.12.16",
-    "unplugin-vue-components": "^0.15.6",
-    "vite": "^2.6.7",
-    "vite-plugin-vue2": "^1.9.0",
-    "vite-plugin-windicss": "^1.4.11",
     "vue-template-compiler": "^2.6.14"
   }
 }

src/components/Feature.vue

@@ -23,14 +23,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue-demi";
+import { defineComponent } from 'vue-demi'
 
 export default defineComponent({
-  name: "Feature",
+  name: 'Feature',
   props: {
     title: { type: String, required: true },
     text: { type: String, required: true },
     url: { type: String, required: true },
   },
-});
+})
 </script>

src/components/Hero.vue

@@ -7,7 +7,7 @@
         class="object-cover object-center rounded"
         alt="Vue logo"
         src="@/assets/vue-logo.svg"
-      />
+      >
     </div>
     <div
       class="flex flex-col items-center text-center lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 md:items-start md:text-left"

src/components/Navbar.vue

@@ -7,7 +7,7 @@
         :to="{ name: 'Home' }"
         class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0"
       >
-        <img alt="Vite logo" src="@/assets/vite-logo.svg" width="36px" />
+        <img alt="Vite logo" src="@/assets/vite-logo.svg" width="36px">
         <span class="ml-3 text-xl dark:text-white">
           {{ appName }}
         </span>
@@ -23,7 +23,7 @@
             'text-green-500 hover:green-500 dark:text-green-500 dark:hover:text-green-500 underline':
               route.name === currentRoute,
             'hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200':
-              route.name != currentRoute,
+              route.name !== currentRoute,
           }"
           :to="{ name: route.name }"
         >
@@ -43,11 +43,11 @@
           <MdiGithub />
         </a>
         <button
-          @click="toggle"
           class="flex items-center justify-center w-9 h-9 focus:outline-none"
+          @click="toggle"
         >
-          <MdiWhiteBalanceSunny class="text-yellow-500" v-if="isDark" />
+          <MdiWhiteBalanceSunny v-if="isDark" class="text-yellow-500" />
-          <MdiMoonWaningCrescent class="text-gray-800" v-else />
+          <MdiMoonWaningCrescent v-else class="text-gray-800" />
         </button>
       </nav>
     </div>
@@ -55,22 +55,22 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue-demi";
+import { computed, defineComponent } from 'vue-demi'
-import { routes } from "@/router";
+import { useDark, useToggle } from '@vueuse/core'
-import { useDark, useToggle } from "@vueuse/core";
+import { routes } from '@/router'
 
 export default defineComponent({
   setup: (_, ctx) => {
     // Import config from .evn
-    const appName = import.meta.env.VITE_APP_NAME;
+    const appName = import.meta.env.VITE_APP_NAME
 
-    const availableRoutes = routes.filter((route) => route.name != "NotFound");
+    const availableRoutes = routes.filter(route => route.name !== 'NotFound')
-    const currentRoute = computed(() => ctx.root.$route.name);
+    const currentRoute = computed(() => ctx.root.$route.name)
 
-    const isDark = useDark();
+    const isDark = useDark()
-    const toggle = useToggle(isDark);
+    const toggle = useToggle(isDark)
 
-    return { appName, routes: availableRoutes, currentRoute, toggle, isDark };
+    return { appName, routes: availableRoutes, currentRoute, toggle, isDark }
   },
-});
+})
 </script>

src/main.ts

@@ -1,16 +1,16 @@
-import Vue from "vue";
+import Vue from 'vue'
-import App from "@/App.vue";
+import { createApp, h } from 'vue-demi'
-import { createApp, h } from "vue-demi";
+import App from '@/App.vue'
 
-import "windi.css";
+import 'windi.css'
-import router from "@/router";
+import router from '@/router'
 
-Vue.config.productionTip = false;
+Vue.config.productionTip = false
-Vue.config.devtools = true;
+Vue.config.devtools = true
 
 const app = createApp({
   router,
   render: () => h(App),
-});
+})
 
-app.mount("#app");
+app.mount('#app')

src/router/index.ts

@@ -1,20 +1,21 @@
-import Vue from "vue";
+import Vue from 'vue'
-import VueRouter, { RouteConfig } from "vue-router";
+import type { RouteConfig } from 'vue-router'
-import Home from "@/views/Home.vue";
+import VueRouter from 'vue-router'
-import About from "@/views/About.vue";
+import Home from '@/views/Home.vue'
-import NotFound from "@/views/NotFound.vue";
+import About from '@/views/About.vue'
+import NotFound from '@/views/NotFound.vue'
 
-Vue.use(VueRouter);
+Vue.use(VueRouter)
 
 export const routes: RouteConfig[] = [
   {
-    path: "/",
+    path: '/',
-    name: "Home",
+    name: 'Home',
     component: Home,
   },
   {
-    path: "/about",
+    path: '/about',
-    name: "About",
+    name: 'About',
     // NOTE: you can also apply meta information
     // meta: {authRequired: false }
     component: About,
@@ -22,16 +23,16 @@ export const routes: RouteConfig[] = [
     // component: () => import("@/views/About.vue")
   },
   {
-    path: "/:path(.*)",
+    path: '/:path(.*)',
-    name: "NotFound",
+    name: 'NotFound',
     component: NotFound,
   },
-];
+]
 
 const router = new VueRouter({
-  base: "/",
+  base: '/',
-  mode: "history",
+  mode: 'history',
   routes,
-});
+})
 
-export default router;
+export default router

src/shims-tsx.d.ts

@@ -1,4 +1,5 @@
-import Vue, { VNode } from "vue";
+import type { VNode } from 'vue'
+import type Vue from 'vue'
 
 declare global {
   namespace JSX {
@@ -6,12 +7,10 @@ declare global {
     interface Element extends VNode {}
     // tslint:disable no-empty-interface
     interface ElementClass extends Vue {}
-    interface IntrinsicElements {
+    type IntrinsicElements = Record<string, any>
-      [elem: string]: any;
-    }
   }
 
   interface ImportMeta {
-    env: Record<any, string>;
+    env: Record<any, string>
   }
 }

src/shims-vue.d.ts

@@ -1,4 +1,4 @@
-declare module "*.vue" {
+declare module '*.vue' {
-  import Vue from "vue";
+  import Vue from 'vue'
-  export default Vue;
+  export default Vue
 }

src/views/NotFound.vue

@@ -7,11 +7,11 @@
         class="object-cover object-center w-5/6 mb-10 rounded lg:w-2/6 md:w-3/6"
         alt="hero"
         src="@/assets/not-found.svg"
-      />
-      <div class="w-full text-center lg:w-2/3">
-        <Heading1 class="text-red-500 dark:text-red-500"
-          >404 NOT FOUND</Heading1
       >
+      <div class="w-full text-center lg:w-2/3">
+        <Heading1 class="text-red-500 dark:text-red-500">
+          404 NOT FOUND
+        </Heading1>
         <p class="mb-8 leading-relaxed dark:text-gray-300">
           Oops, looks like you got kidnapped by aliens.
         </p>

tailwind.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-  darkMode: "class", // or 'media'
+  darkMode: 'class', // or 'media'
   theme: {},
   variants: {},
   plugins: [],
-};
+}

vite.config.js

@@ -1,17 +1,17 @@
-import path from "path";
+import path from 'path'
-import { defineConfig } from "vite";
+import { defineConfig } from 'vite'
-import { createVuePlugin } from "vite-plugin-vue2";
+import { createVuePlugin } from 'vite-plugin-vue2'
-import WindiCSS from "vite-plugin-windicss";
+import WindiCSS from 'vite-plugin-windicss'
-import Components from "unplugin-vue-components/vite";
+import Components from 'unplugin-vue-components/vite'
-import Icons from "unplugin-icons/vite";
+import Icons from 'unplugin-icons/vite'
-import IconsResolver from "unplugin-icons/resolver";
+import IconsResolver from 'unplugin-icons/resolver'
 
 const config = defineConfig({
   resolve: {
     alias: {
-      "@": `${path.resolve(__dirname, "src")}`,
+      '@': `${path.resolve(__dirname, 'src')}`,
     },
-    dedupe: ["vue-demi"],
+    dedupe: ['vue-demi'],
   },
 
   build: {
@@ -24,7 +24,7 @@ const config = defineConfig({
     Components({
       resolvers: [
         IconsResolver({
-          componentPrefix: "",
+          componentPrefix: '',
         }),
       ],
     }),
@@ -34,6 +34,6 @@ const config = defineConfig({
   server: {
     port: 8080,
   },
-});
+})
 
-export default config;
+export default config