chore: migrate to eslint v9

babel.config.cjs

@@ -3,9 +3,9 @@ module.exports = {
     [
       '@babel/preset-env', {
         targets: {
-          esmodules: true
-        }
-      }
-    ]
-  ]
+          esmodules: true,
+        },
+      },
+    ],
+  ],
 }

build.config.ts

@@ -2,8 +2,8 @@ import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
   hooks: {
-    'rollup:options' (_ctx, options) {
+    'rollup:options'(_ctx, options) {
       options.treeshake = false
-    }
-  }
+    },
+  },
 })

commitlint.config.cjs

@@ -1,5 +1,5 @@
 module.exports = {
   extends: [
-    '@commitlint/config-conventional'
-  ]
+    '@commitlint/config-conventional',
+  ],
 }

docs/app.config.ts

@@ -6,33 +6,33 @@ export default defineAppConfig({
     description: 'Dark and Light mode with auto detection made easy with Nuxt 🌗',
     socials: {
       twitter: 'nuxt_js',
-      github: 'nuxt-modules/color-mode'
+      github: 'nuxt-modules/color-mode',
     },
     aside: {
-      level: 1
+      level: 1,
     },
     image: '/cover.jpg',
     header: {
-      logo: true
+      logo: true,
     },
     footer: {
       credits: {
         icon: 'IconDocus',
         text: 'Powered by Docus',
-        href: 'https://docus.com'
+        href: 'https://docus.com',
       },
       iconLinks: [
         {
           label: 'Nuxt',
           href: 'https://nuxt.com',
-          icon: 'IconNuxt'
+          icon: 'IconNuxt',
         },
         {
           label: 'Vue Telescope',
           href: 'https://vuetelescope.com',
-          icon: 'IconVueTelescope'
-        }
-      ]
-    }
-  }
+          icon: 'IconVueTelescope',
+        },
+      ],
+    },
+  },
 })

docs/nuxt.config.ts

@@ -2,6 +2,6 @@ export default defineNuxtConfig({
   extends: ['@nuxt-themes/docus'],
   modules: ['@nuxtjs/plausible'],
   imports: {
-    autoImport: true
-  }
+    autoImport: true,
+  },
 })

docs/tokens.config.ts

@@ -12,7 +12,7 @@ export default defineTheme({
       600: '#009d5d',
       700: '#007e4a',
       800: '#005e38',
-      900: '#003f25'
-    }
-  }
+      900: '#003f25',
+    },
+  },
 })

eslint.config.js

@@ -0,0 +1,28 @@
+// @ts-check
+import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+
+export default createConfigForNuxt({
+  features: {
+    tooling: true,
+    stylistic: true,
+  },
+  dirs: {
+    src: [
+      './playground',
+      './docs',
+    ],
+  },
+}).append(
+  {
+    files: ['test/**'],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+  {
+    files: ['docs/**'],
+    rules: {
+      'vue/multi-word-component-names': 'off',
+    },
+  },
+)

jest.config.cjs

@@ -3,12 +3,12 @@ module.exports = {
   collectCoverage: true,
   collectCoverageFrom: [
     'lib/module.js',
-    'lib/utils.js'
+    'lib/utils.js',
   ],
   moduleNameMapper: {
     '^~/(.*)$': '<rootDir>/lib/$1',
     '^~~$': '<rootDir>',
     '^@@$': '<rootDir>',
-    '^@/(.*)$': '<rootDir>/lib/$1'
-  }
+    '^@/(.*)$': '<rootDir>/lib/$1',
+  },
 }

package.json

@@ -32,7 +32,7 @@
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "lint": "eslint --ext .js,.vue,.ts .",
+    "lint": "eslint .",
     "prepublishOnly": "pnpm run prepack",
     "release": "pnpm test && standard-version && git push --follow-tags && npm publish",
     "test": "vitest run --coverage"
@@ -47,15 +47,15 @@
     "@nuxt/module-builder": "^0.5.5",
     "@nuxt/schema": "^3.11.1",
     "@nuxt/test-utils": "^3.12.0",
-    "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@types/lodash.template": "^4.5.3",
     "@typescript-eslint/parser": "^7.3.1",
     "@vitest/coverage-v8": "^1.4.0",
-    "eslint": "^8.57.0",
+    "eslint": "^9.0.0",
     "husky": "9.0.11",
     "nuxt": "^3.11.1",
     "standard-version": "^9.5.0",
     "typescript": "^5.4.3",
-    "vitest": "^1.4.0"
+    "vitest": "^1.4.0",
+    "@nuxt/eslint-config": "^0.3.5"
   }
-}
+}

playground/app.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="container">
-    <Meta name="description" content="Demo of using @nuxtjs/color-mode for Nuxt, supporting dark mode and custom colors" />
+    <Meta
+      name="description"
+      content="Demo of using @nuxtjs/color-mode for Nuxt, supporting dark mode and custom colors"
+    />
     <p>
       <NuxtLogo />
     </p>

playground/components/ColorModePicker.vue

@@ -6,14 +6,20 @@
         :key="color"
         :class="{
           preferred: !$colorMode.unknown && color === $colorMode.preference,
-          selected: !$colorMode.unknown && color === $colorMode.value
+          selected: !$colorMode.unknown && color === $colorMode.value,
         }"
       >
-        <component :is="`icon-${color}`" @click="$colorMode.preference = color" />
+        <component
+          :is="`icon-${color}`"
+          @click="$colorMode.preference = color"
+        />
       </li>
     </ul>
     <p>
-      <ColorScheme placeholder="..." tag="span">
+      <ColorScheme
+        placeholder="..."
+        tag="span"
+      >
         Color mode: <b>{{ $colorMode.preference }}</b>
         <span v-if="$colorMode.preference === 'system'">&nbsp;(<i>{{ $colorMode.value }}</i> mode detected)</span>
       </ColorScheme>

playground/components/IconLight.vue

@@ -10,5 +10,49 @@
     stroke-linecap="round"
     stroke-linejoin="round"
     class="feather feather-sun"
-  ><circle cx="12" cy="12" r="5" /><line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" /><line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" /><line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" /><line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" /></svg>
+  ><circle
+    cx="12"
+    cy="12"
+    r="5"
+  /><line
+    x1="12"
+    y1="1"
+    x2="12"
+    y2="3"
+  /><line
+    x1="12"
+    y1="21"
+    x2="12"
+    y2="23"
+  /><line
+    x1="4.22"
+    y1="4.22"
+    x2="5.64"
+    y2="5.64"
+  /><line
+    x1="18.36"
+    y1="18.36"
+    x2="19.78"
+    y2="19.78"
+  /><line
+    x1="1"
+    y1="12"
+    x2="3"
+    y2="12"
+  /><line
+    x1="21"
+    y1="12"
+    x2="23"
+    y2="12"
+  /><line
+    x1="4.22"
+    y1="19.78"
+    x2="5.64"
+    y2="18.36"
+  /><line
+    x1="18.36"
+    y1="5.64"
+    x2="19.78"
+    y2="4.22"
+  /></svg>
 </template>

playground/components/IconSepia.vue

@@ -10,5 +10,20 @@
     stroke-linecap="round"
     stroke-linejoin="round"
     class="feather feather-coffee"
-  ><path d="M18 8h1a4 4 0 0 1 0 8h-1" /><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z" /><line x1="6" y1="1" x2="6" y2="4" /><line x1="10" y1="1" x2="10" y2="4" /><line x1="14" y1="1" x2="14" y2="4" /></svg>
+  ><path d="M18 8h1a4 4 0 0 1 0 8h-1" /><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z" /><line
+    x1="6"
+    y1="1"
+    x2="6"
+    y2="4"
+  /><line
+    x1="10"
+    y1="1"
+    x2="10"
+    y2="4"
+  /><line
+    x1="14"
+    y1="1"
+    x2="14"
+    y2="4"
+  /></svg>
 </template>

playground/components/IconSystem.vue

@@ -17,5 +17,15 @@
     height="14"
     rx="2"
     ry="2"
-  /><line x1="8" y1="21" x2="16" y2="21" /><line x1="12" y1="17" x2="12" y2="21" /></svg>
+  /><line
+    x1="8"
+    y1="21"
+    x2="16"
+    y2="21"
+  /><line
+    x1="12"
+    y1="17"
+    x2="12"
+    y2="21"
+  /></svg>
 </template>

playground/components/NuxtLogo.vue

@@ -1,13 +1,29 @@
 <template>
-  <a href="https://nuxt.com" target="_blank">
-    <svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 132 32">
+  <a
+    href="https://nuxt.com"
+    target="_blank"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="40"
+      viewBox="0 0 132 32"
+    >
       <g clip-path="url(#a)">
-        <path fill="#00DC82" d="M26.8295 31.4227h17.5887a3.2568 3.2568 0 0 0 1.5913-.4135c.4838-.271.8855-.6607 1.1647-1.1301a3.0152 3.0152 0 0 0 .4259-1.5436 3.0152 3.0152 0 0 0-.4273-1.5433L35.3608 6.9469c-.2792-.4692-.6809-.859-1.1646-1.1298a3.2576 3.2576 0 0 0-1.5909-.4136 3.2577 3.2577 0 0 0-1.591.4136c-.4837.2709-.8853.6606-1.1645 1.1298l-3.0203 5.0777-5.9052-9.9293c-.2794-.4692-.6812-.8588-1.165-1.1297A3.2598 3.2598 0 0 0 18.168.5521a3.2598 3.2598 0 0 0-1.5913.4135c-.4838.2709-.8856.6605-1.165 1.1297L.713 26.7922a3.0153 3.0153 0 0 0-.4272 1.5433 3.0146 3.0146 0 0 0 .4258 1.5436c.2792.4694.681.8591 1.1647 1.1301a3.257 3.257 0 0 0 1.5913.4135h11.0407c4.3745 0 7.6005-1.8638 9.8203-5.5l5.3892-9.0531 2.8866-4.845 8.6633 14.5532H29.7178l-2.8883 4.8449Zm-12.5012-4.8499-7.705-.0017 11.5498-19.403 5.763 9.7015-3.8586 6.4843c-1.4741 2.3593-3.1488 3.2189-5.7492 3.2189Z" />
-        <path class="gray" d="M60.65 31.1321V19.5774c0-3.3065-.3443-6.613-.3443-6.613s1.3083 3.0158 2.9608 5.85l7.0578 12.3177h5.543V5.6973h-5.1987v11.5546c0 3.3066.3443 6.6494.3443 6.6494s-1.3083-3.0522-2.9264-5.8863L60.9942 5.6973h-5.5085V31.132H60.65ZM92.2457 12.819v10.0286c0 2.3255-1.4804 4.0696-3.5805 4.0696-1.9624 0-3.3396-1.5988-3.3396-3.8153V12.819h-4.7855v11.4093c0 4.1786 2.5477 7.1945 6.4381 7.1945 2.3756 0 4.3035-1.0901 5.2675-2.8342v2.5435h4.82V12.819h-4.82ZM111.082 21.6122l5.819-8.7932h-5.268l-3.167 4.8326-3.168-4.8326h-5.233l5.819 8.7569-6.2663 9.5562h5.1303l3.752-5.632 3.718 5.632h5.096l-6.232-9.5199ZM122.281 12.819h-3.34v4.2149h3.34v7.4488c0 4.2512 2.582 6.6494 6.576 6.6494h2.857v-4.2513h-2.203c-1.549 0-2.445-.8357-2.445-2.6161v-7.2308h4.648V12.819h-4.648V7.405h-4.785v5.414Z" />
+        <path
+          fill="#00DC82"
+          d="M26.8295 31.4227h17.5887a3.2568 3.2568 0 0 0 1.5913-.4135c.4838-.271.8855-.6607 1.1647-1.1301a3.0152 3.0152 0 0 0 .4259-1.5436 3.0152 3.0152 0 0 0-.4273-1.5433L35.3608 6.9469c-.2792-.4692-.6809-.859-1.1646-1.1298a3.2576 3.2576 0 0 0-1.5909-.4136 3.2577 3.2577 0 0 0-1.591.4136c-.4837.2709-.8853.6606-1.1645 1.1298l-3.0203 5.0777-5.9052-9.9293c-.2794-.4692-.6812-.8588-1.165-1.1297A3.2598 3.2598 0 0 0 18.168.5521a3.2598 3.2598 0 0 0-1.5913.4135c-.4838.2709-.8856.6605-1.165 1.1297L.713 26.7922a3.0153 3.0153 0 0 0-.4272 1.5433 3.0146 3.0146 0 0 0 .4258 1.5436c.2792.4694.681.8591 1.1647 1.1301a3.257 3.257 0 0 0 1.5913.4135h11.0407c4.3745 0 7.6005-1.8638 9.8203-5.5l5.3892-9.0531 2.8866-4.845 8.6633 14.5532H29.7178l-2.8883 4.8449Zm-12.5012-4.8499-7.705-.0017 11.5498-19.403 5.763 9.7015-3.8586 6.4843c-1.4741 2.3593-3.1488 3.2189-5.7492 3.2189Z"
+        />
+        <path
+          class="gray"
+          d="M60.65 31.1321V19.5774c0-3.3065-.3443-6.613-.3443-6.613s1.3083 3.0158 2.9608 5.85l7.0578 12.3177h5.543V5.6973h-5.1987v11.5546c0 3.3066.3443 6.6494.3443 6.6494s-1.3083-3.0522-2.9264-5.8863L60.9942 5.6973h-5.5085V31.132H60.65ZM92.2457 12.819v10.0286c0 2.3255-1.4804 4.0696-3.5805 4.0696-1.9624 0-3.3396-1.5988-3.3396-3.8153V12.819h-4.7855v11.4093c0 4.1786 2.5477 7.1945 6.4381 7.1945 2.3756 0 4.3035-1.0901 5.2675-2.8342v2.5435h4.82V12.819h-4.82ZM111.082 21.6122l5.819-8.7932h-5.268l-3.167 4.8326-3.168-4.8326h-5.233l5.819 8.7569-6.2663 9.5562h5.1303l3.752-5.632 3.718 5.632h5.096l-6.232-9.5199ZM122.281 12.819h-3.34v4.2149h3.34v7.4488c0 4.2512 2.582 6.6494 6.576 6.6494h2.857v-4.2513h-2.203c-1.549 0-2.445-.8357-2.445-2.6161v-7.2308h4.648V12.819h-4.648V7.405h-4.785v5.414Z"
+        />
       </g>
       <defs>
         <clipPath id="a">
-          <path fill="#fff" d="M.2858 0h131.429v32H.2858z" />
+          <path
+            fill="#fff"
+            d="M.2858 0h131.429v32H.2858z"
+          />
         </clipPath>
       </defs>
     </svg>

playground/nuxt.config.js → playground/nuxt.config.ts

@@ -1,7 +1,5 @@
-import colorModeModule from '../src/module'
-
 export default defineNuxtConfig({
   components: { global: true, dirs: ['~/components'] },
   css: ['~/assets/main.css'],
-  modules: [colorModeModule]
+  modules: ['../src/module'],
 })

playground/pages/light.vue

@@ -15,6 +15,6 @@
 
 <script setup lang="ts">
 definePageMeta({
-  colorMode: 'light'
+  colorMode: 'light',
 })
 </script>