chore: migrate to eslint v9

Author: benjamincanac

.eslintignore

@@ -0,0 +1,3 @@
+{
+  "eslint.experimental.useFlatConfig": true
+}

.eslintrc.cjs

@@ -10,7 +10,7 @@ export default defineAppConfig({
     }
   },
   seo: {
-    siteName: 'Nuxt UI Pro - Docs template',
+    siteName: 'Nuxt UI Pro - Docs template'
   },
   header: {
     logo: {
@@ -21,34 +21,34 @@ export default defineAppConfig({
     search: true,
     colorMode: true,
     links: [{
-      icon: 'i-simple-icons-github',
-      to: 'https://github.com/nuxt-ui-pro/docs',
-      target: '_blank',
+      'icon': 'i-simple-icons-github',
+      'to': 'https://github.com/nuxt-ui-pro/docs',
+      'target': '_blank',
       'aria-label': 'Docs template on GitHub'
     }]
   },
   footer: {
     credits: 'Copyright © 2023',
     colorMode: false,
     links: [{
-      icon: 'i-simple-icons-nuxtdotjs',
-      to: 'https://nuxt.com',
-      target: '_blank',
+      'icon': 'i-simple-icons-nuxtdotjs',
+      'to': 'https://nuxt.com',
+      'target': '_blank',
       'aria-label': 'Nuxt Website'
     }, {
-      icon: 'i-simple-icons-discord',
-      to: 'https://discord.com/invite/ps2h6QT',
-      target: '_blank',
+      'icon': 'i-simple-icons-discord',
+      'to': 'https://discord.com/invite/ps2h6QT',
+      'target': '_blank',
       'aria-label': 'Nuxt UI on Discord'
     }, {
-      icon: 'i-simple-icons-x',
-      to: 'https://x.com/nuxt_js',
-      target: '_blank',
+      'icon': 'i-simple-icons-x',
+      'to': 'https://x.com/nuxt_js',
+      'target': '_blank',
       'aria-label': 'Nuxt on X'
     }, {
-      icon: 'i-simple-icons-github',
-      to: 'https://github.com/nuxt/ui',
-      target: '_blank',
+      'icon': 'i-simple-icons-github',
+      'to': 'https://github.com/nuxt/ui',
+      'target': '_blank',
       'aria-label': 'Nuxt UI on GitHub'
     }]
   },
@@ -61,17 +61,17 @@ export default defineAppConfig({
         icon: 'i-heroicons-star',
         label: 'Star on GitHub',
         to: 'https://github.com/nuxt/ui',
-        target: '_blank',
+        target: '_blank'
       }, {
         icon: 'i-heroicons-book-open',
         label: 'Nuxt UI Pro docs',
         to: 'https://ui.nuxt.com/pro/guide',
-        target: '_blank',
+        target: '_blank'
       }, {
         icon: 'i-simple-icons-nuxtdotjs',
         label: 'Purchase a license',
         to: 'https://ui.nuxt.com/pro/purchase',
-        target: '_blank',
+        target: '_blank'
       }]
     }
   }

.vscode/settings.json

@@ -36,18 +36,21 @@ provide('navigation', navigation)
   <div>
     <NuxtLoadingIndicator />
 
-    <Header />
+    <AppHeader />
 
     <UMain>
       <NuxtLayout>
         <NuxtPage />
       </NuxtLayout>
     </UMain>
 
-    <Footer />
+    <AppFooter />
 
     <ClientOnly>
-      <LazyUContentSearch :files="files" :navigation="navigation" />
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+      />
     </ClientOnly>
 
     <UNotifications />

app.config.ts

@@ -13,16 +13,27 @@ const { header } = useAppConfig()
         <UColorModeImage v-bind="{ class: 'h-6 w-auto', ...header?.logo }" />
       </template>
       <template v-else>
-        Nuxt UI Pro <UBadge label="Docs" variant="subtle" class="mb-0.5" />
+        Nuxt UI Pro <UBadge
+          label="Docs"
+          variant="subtle"
+          class="mb-0.5"
+        />
       </template>
     </template>
 
-    <template v-if="header?.search" #center>
+    <template
+      v-if="header?.search"
+      #center
+    >
       <UContentSearchButton class="hidden lg:flex" />
     </template>
 
     <template #right>
-      <UContentSearchButton v-if="header?.search" :label="null" class="lg:hidden" />
+      <UContentSearchButton
+        v-if="header?.search"
+        :label="null"
+        class="lg:hidden"
+      />
 
       <UColorModeButton v-if="header?.colorMode" />
 

app.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { NuxtError } from '#app'
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { NuxtError } from '#app'
 
 useSeoMeta({
   title: 'Page not found',
@@ -23,15 +23,15 @@ useHead({
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
 const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
   default: () => [],
-  server: false,
+  server: false
 })
 
 provide('navigation', navigation)
 </script>
 
 <template>
   <div>
-    <Header />
+    <AppHeader />
 
     <UMain>
       <UContainer>
@@ -41,10 +41,13 @@ provide('navigation', navigation)
       </UContainer>
     </UMain>
 
-    <Footer />
+    <AppFooter />
 
     <ClientOnly>
-      <LazyUContentSearch :files="files" :navigation="navigation" />
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+      />
     </ClientOnly>
 
     <UNotifications />

components/Footer.vue renamed to components/AppFooter.vue

@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

components/Header.vue renamed to components/AppHeader.vue

@@ -3,6 +3,7 @@ export default defineNuxtConfig({
   extends: ['@nuxt/ui-pro'],
   modules: [
     '@nuxt/content',
+    '@nuxt/eslint',
     '@nuxt/ui',
     '@nuxt/fonts',
     '@nuxthq/studio',
@@ -11,21 +12,29 @@ export default defineNuxtConfig({
   hooks: {
     // Define `@nuxt/ui` components as global to use them in `.md` (feel free to add those you need)
     'components:extend': (components) => {
-      const globals = components.filter((c) => ['UButton', 'UIcon'].includes(c.pascalName))
+      const globals = components.filter(c => ['UButton', 'UIcon'].includes(c.pascalName))
 
-      globals.forEach((c) => c.global = true)
+      globals.forEach(c => c.global = true)
     }
   },
   ui: {
     icons: ['heroicons', 'simple-icons']
   },
   routeRules: {
-    '/api/search.json': { prerender: true },
+    '/api/search.json': { prerender: true }
   },
   devtools: {
     enabled: true
   },
   typescript: {
     strict: false
+  },
+  eslint: {
+    config: {
+      stylistic: {
+        commaDangle: 'never',
+        braceStyle: '1tbs'
+      }
+    }
   }
 })

error.vue

@@ -86,7 +86,7 @@ export default defineNuxtSchema({
           icon: 'i-mdi-web',
           default: []
         })
-      },
+      }
     }),
     header: group({
       title: 'Header',
@@ -142,7 +142,7 @@ export default defineNuxtSchema({
           icon: 'i-mdi-link-variant',
           default: []
         })
-      },
+      }
     }),
     footer: group({
       title: 'Footer',

eslint.config.mjs

@@ -21,9 +21,9 @@
     "nuxt-og-image": "^2.2.4"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.3.9",
+    "@nuxt/eslint": "^0.3.9",
     "@nuxthq/studio": "^1.0.13",
-    "eslint": "^8.57.0",
+    "eslint": "^9.1.1",
     "vue-tsc": "^2.0.14"
   }
 }

nuxt.config.ts

@@ -38,29 +38,55 @@ const links = computed(() => [toc?.bottom?.edit && {
   icon: 'i-heroicons-pencil-square',
   label: 'Edit this page',
   to: `${toc.bottom.edit}/${page?.value?._file}`,
-  target: '_blank',
+  target: '_blank'
 }, ...(toc?.bottom?.links || [])].filter(Boolean))
 </script>
 
 <template>
   <UPage>
-    <UPageHeader :title="page.title" :description="page.description" :links="page.links" :headline="headline" />
+    <UPageHeader
+      :title="page.title"
+      :description="page.description"
+      :links="page.links"
+      :headline="headline"
+    />
 
     <UPageBody prose>
-      <ContentRenderer v-if="page.body" :value="page" />
+      <ContentRenderer
+        v-if="page.body"
+        :value="page"
+      />
 
       <hr v-if="surround?.length">
 
       <UContentSurround :surround="surround" />
     </UPageBody>
 
-    <template v-if="page.toc !== false" #right>
-      <UContentToc :title="toc?.title" :links="page.body?.toc?.links">
-        <template v-if="toc?.bottom" #bottom>
-          <div class="hidden lg:block space-y-6" :class="{ '!mt-6': page.body?.toc?.links?.length }">
-            <UDivider v-if="page.body?.toc?.links?.length" type="dashed" />
+    <template
+      v-if="page.toc !== false"
+      #right
+    >
+      <UContentToc
+        :title="toc?.title"
+        :links="page.body?.toc?.links"
+      >
+        <template
+          v-if="toc?.bottom"
+          #bottom
+        >
+          <div
+            class="hidden lg:block space-y-6"
+            :class="{ '!mt-6': page.body?.toc?.links?.length }"
+          >
+            <UDivider
+              v-if="page.body?.toc?.links?.length"
+              type="dashed"
+            />
 
-            <UPageLinks :title="toc.bottom.title" :links="links" />
+            <UPageLinks
+              :title="toc.bottom.title"
+              :links="links"
+            />
           </div>
         </template>
       </UContentToc>