chore: move to eslint9

.vscode/settings.json

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

docs/app.config.ts

@@ -15,7 +15,7 @@ export default defineAppConfig({
     }
   },
   seo: {
-    siteName: 'NuxtHub',
+    siteName: 'NuxtHub'
   },
   header: {
     links: [{
@@ -34,12 +34,12 @@ export default defineAppConfig({
         icon: 'i-heroicons-star',
         label: 'Star on GitHub',
         to: 'https://github.com/nuxt-hub/core',
-        target: '_blank',
+        target: '_blank'
       }, {
         icon: 'i-simple-icons-nuxtdotjs',
         label: 'NuxtHub Admin',
         to: 'https://admin.hub.nuxt.com',
-        target: '_blank',
+        target: '_blank'
       }]
     }
   }

docs/components/UInputCopy.vue

@@ -2,7 +2,7 @@
 defineProps({
   value: {
     type: String,
-    required: true,
+    required: true
   },
   size: {
     type: String,

docs/components/content/Alert.vue

@@ -1,12 +1,11 @@
-
 <script setup lang="ts">
 import type uiColors from '#ui-colors'
 
 const props = defineProps({
-  title: { type: String, required: true},
+  title: { type: String, required: true },
   icon: { type: String, default: '' },
   color: { type: String as PropType<(typeof uiColors)[number]>, required: true },
-  to: { type: String, default: '' },
+  to: { type: String, default: '' }
 })
 
 const target = computed(() => (props.to?.startsWith('https://') ? '_blank' : ''))

docs/error.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,7 +23,7 @@ useHead({
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
 const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
   default: () => [],
-  server: false,
+  server: false
 })
 
 provide('navigation', navigation.value?.[0]?.children || [])

docs/nuxt.config.ts

@@ -15,16 +15,16 @@ 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', 'ph', 'simple-icons']
   },
   routeRules: {
-    '/api/search.json': { prerender: true },
+    '/api/search.json': { prerender: true }
   },
   nitro: {
     prerender: {

docs/nuxt.schema.ts

@@ -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',

docs/pages/[...slug].vue

@@ -39,7 +39,7 @@ 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>
 

docs/pages/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import mediumZoom from 'medium-zoom'
 import { joinURL } from 'ufo'
+
 const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
 
 const { url } = useSiteConfig()
@@ -14,7 +15,7 @@ useSeoMeta({
 })
 onMounted(() => {
   mediumZoom('[data-zoom-src]', {
-    margin: 5,
+    margin: 5
   })
 })
 </script>

docs/server/api/search.json.get.ts

@@ -2,4 +2,4 @@ import { serverQueryContent } from '#content/server'
 
 export default eventHandler(async (event) => {
   return serverQueryContent(event).where({ _type: 'markdown', navigation: { $ne: false } }).find()
-})
+})

eslint.config.js

@@ -0,0 +1,24 @@
+// @ts-check
+import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+
+export default createConfigForNuxt({
+  features: {
+    tooling: true,
+    stylistic: {
+      quoteProps: 'as-needed',
+      commaDangle: 'never',
+      braceStyle: '1tbs'
+    }
+  },
+  dirs: {
+    src: [
+      './playground',
+      './docs'
+    ]
+  }
+}).overrideRules({
+  '@typescript-eslint/no-explicit-any': 'off',
+  'vue/max-attributes-per-line': 'off',
+  'vue/no-v-html': 'off',
+  'vue/multi-word-component-names': 'off'
+})

package.json

@@ -57,16 +57,16 @@
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.1.5",
-    "@nuxt/eslint-config": "^0.2.0",
+    "@nuxt/eslint-config": "^0.3.7",
     "@nuxt/module-builder": "^0.5.5",
     "@nuxt/schema": "^3.11.2",
-    "@nuxt/test-utils": "^3.12.0",
+    "@nuxt/test-utils": "^3.12.1",
     "@types/node": "^20.12.7",
     "changelogen": "^0.5.5",
-    "eslint": "^8.57.0",
+    "eslint": "^9.0.0",
     "nuxt": "^3.11.2",
-    "typescript": "^5.4.4",
-    "vitest": "^1.4.0",
-    "wrangler": "^3.48.0"
+    "typescript": "^5.4.5",
+    "vitest": "^1.5.0",
+    "wrangler": "^3.51.0"
   }
 }

playground/package.json

@@ -10,9 +10,9 @@
   "dependencies": {
     "@iconify-json/simple-icons": "^1.1.99",
     "@kgierke/nuxt-basic-auth": "^1.5.0",
-    "@nuxt/ui": "^2.15.1",
+    "@nuxt/ui": "^2.15.2",
     "@nuxthub/core": "latest",
-    "drizzle-orm": "^0.30.7",
+    "drizzle-orm": "^0.30.8",
     "nuxt": "^3.11.2"
   },
   "devDependencies": {

playground/pages/blob.vue

@@ -6,7 +6,7 @@ const uploadRef = ref()
 const toast = useToast()
 const { data: files } = await useFetch('/api/blob')
 
-async function addFile () {
+async function addFile() {
   if (!newFilesValue.value.length) {
     toast.add({ title: 'Missing files.', color: 'red' })
     return
@@ -16,7 +16,7 @@ async function addFile () {
 
   try {
     const formData = new FormData()
-    newFilesValue.value.forEach((file) => formData.append('files', file))
+    newFilesValue.value.forEach(file => formData.append('files', file))
     const uploadedFiles = await $fetch('/api/blob', {
       method: 'PUT',
       body: formData
@@ -31,7 +31,7 @@ async function addFile () {
   loading.value = false
 }
 
-function onFileSelect (e: any) {
+function onFileSelect(e: any) {
   const target = e.target
 
   // clone FileList so the reference does not clear due to following target clear
@@ -43,9 +43,8 @@ function onFileSelect (e: any) {
   addFile()
 }
 
-async function deleteFile (pathname: string) {
+async function deleteFile(pathname: string) {
   try {
-    // @ts-ignore
     await $fetch(`/api/blob/${pathname}`, { method: 'DELETE' })
     files.value = files.value!.filter(t => t.pathname !== pathname)
     toast.add({ title: `File "${pathname}" deleted.` })

playground/pages/database.vue

@@ -6,8 +6,8 @@ const newTodoInput = ref(null)
 const toast = useToast()
 const { data: todos } = await useFetch('/api/todos')
 
-async function addTodo () {
-  if (!newTodo.value.trim()) { return }
+async function addTodo() {
+  if (!newTodo.value.trim()) return
 
   loading.value = true
 
@@ -32,7 +32,7 @@ async function addTodo () {
   loading.value = false
 }
 
-async function toggleTodo (todo) {
+async function toggleTodo(todo) {
   todo.completed = Number(!todo.completed)
   await useFetch(`/api/todos/${todo.id}`, {
     method: 'PATCH',
@@ -42,7 +42,7 @@ async function toggleTodo (todo) {
   })
 }
 
-async function deleteTodo (todo) {
+async function deleteTodo(todo) {
   await useFetch(`/api/todos/${todo.id}`, { method: 'DELETE' })
   todos.value = todos.value.filter(t => t.id !== todo.id)
   toast.add({ title: `Todo "${todo.title}" deleted.` })

playground/pages/kv.vue

@@ -9,10 +9,10 @@ const editedEntryValue = ref(null)
 const toast = useToast()
 const { data: entries } = await useFetch('/api/kv')
 
-async function addEntry () {
+async function addEntry() {
   const key = newEntryKey.value.trim().replace(/\s/g, '-')
   const value = newEntryValue.value.trim()
-  if (!key || !value) { return }
+  if (!key || !value) return
 
   loading.value = true
 
@@ -43,12 +43,12 @@ async function addEntry () {
   loading.value = false
 }
 
-function editEntry (entry) {
+function editEntry(entry) {
   editedEntryValue.value = entry.value
   editedEntryKey.value = entry.key
 }
 
-async function updateEntry () {
+async function updateEntry() {
   const entry = await $fetch('/api/kv', {
     method: 'PUT',
     body: {
@@ -66,7 +66,7 @@ async function updateEntry () {
   editedEntryValue.value = null
 }
 
-async function deleteEntry (entry) {
+async function deleteEntry(entry) {
   await $fetch(`/api/kv/${entry.key}`, { method: 'DELETE' })
   entries.value = entries.value.filter(t => t.key !== entry.key)
   toast.add({ title: `Entry "${entry.key}" deleted.` })
@@ -109,7 +109,6 @@ async function deleteEntry (entry) {
       >
         <span class="flex-1 font-medium">{{ entry.key }}</span>
 
-
         <div class="flex-1 flex items-center">
           <span v-if="editedEntryKey !== entry.key" class="flex-1 font-medium">{{ entry.value }}</span>
           <UInput

playground/server/api/test.ts

@@ -8,7 +8,6 @@ export default eventHandler(async () => {
   await kv.set('react:next', { version: 2016 })
   await kv.set('react:gatsby', { version: 2015 })
 
-
   return kv.keys()
   // const db = hubDatabase()
   // return useProjectKV(projectUrl).getKeys()

playground/server/utils/db.ts

@@ -1,12 +1,13 @@
 import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core'
 import { drizzle } from 'drizzle-orm/d1'
+
 export { sql } from 'drizzle-orm'
 
 const todos = sqliteTable('todos', {
   id: integer('id').primaryKey(),
   title: text('title').notNull(),
   completed: integer('completed').notNull().default(0),
-  createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
+  createdAt: integer('created_at', { mode: 'timestamp' }).notNull()
 })
 
 export const tables = {