chore: migrate to eslint v9

nuxt-ui-pro · Apr 25, 2024 · d053121 · d053121
1 parent 7cad509
commit d053121
Show file tree

Hide file tree

Showing 12 changed files with 6,981 additions and 5,359 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "eslint.experimental.useFlatConfig": true
+}
diff --git a/app.vue b/app.vue
@@ -19,13 +19,13 @@ useSeoMeta({
 </script>
 
 <template>
-  <Header />
+  <AppHeader />
 
   <UMain>
     <NuxtPage />
   </UMain>
 
-  <Footer />
+  <AppFooter />
 
   <UNotifications />
 </template>
diff --git a/components/Footer.vue → components/AppFooter.vue b/components/Footer.vue → components/AppFooter.vue
@@ -39,7 +39,7 @@ const toast = useToast()
 const email = ref('')
 const loading = ref(false)
 
-function onSubmit () {
+function onSubmit() {
   loading.value = true
 
   setTimeout(() => {
@@ -59,10 +59,27 @@ function onSubmit () {
       <UFooterColumns :links="links">
         <template #right>
           <form @submit.prevent="onSubmit">
-            <UFormGroup label="Subscribe to our newsletter" :ui="{ container: 'mt-3' }">
-              <UInput v-model="email" type="email" placeholder="Enter your email" :ui="{ icon: { trailing: { pointer: '' } } }" required size="xl" autocomplete="off" class="max-w-sm">
+            <UFormGroup
+              label="Subscribe to our newsletter"
+              :ui="{ container: 'mt-3' }"
+            >
+              <UInput
+                v-model="email"
+                type="email"
+                placeholder="Enter your email"
+                :ui="{ icon: { trailing: { pointer: '' } } }"
+                required
+                size="xl"
+                autocomplete="off"
+                class="max-w-sm"
+              >
                 <template #trailing>
-                  <UButton type="submit" size="xs" :label="loading ? 'Subscribing' : 'Subscribe'" :loading="loading" />
+                  <UButton
+                    type="submit"
+                    size="xs"
+                    :label="loading ? 'Subscribing' : 'Subscribe'"
+                    :loading="loading"
+                  />
                 </template>
               </UInput>
             </UFormGroup>
@@ -80,7 +97,14 @@ function onSubmit () {
     <template #right>
       <UColorModeButton size="sm" />
 
-      <UButton to="https://github.com/nuxt-ui-pro/landing" target="_blank" icon="i-simple-icons-github" aria-label="GitHub" color="gray" variant="ghost" />
+      <UButton
+        to="https://github.com/nuxt-ui-pro/landing"
+        target="_blank"
+        icon="i-simple-icons-github"
+        aria-label="GitHub"
+        color="gray"
+        variant="ghost"
+      />
     </template>
   </UFooter>
 </template>
diff --git a/components/Header.vue → components/AppHeader.vue b/components/Header.vue → components/AppHeader.vue
@@ -37,20 +37,38 @@ nuxtApp.hooks.hookOnce('page:finish', () => {
 <template>
   <UHeader :links="links">
     <template #logo>
-      Nuxt UI Pro <UBadge label="Landing" variant="subtle" class="mb-0.5" />
+      Nuxt UI Pro <UBadge
+        label="Landing"
+        variant="subtle"
+        class="mb-0.5"
+      />
     </template>
 
     <template #right>
-      <UButton label="Sign in" color="white" variant="ghost" trailing-icon="i-heroicons-arrow-right-20-solid" class="hidden lg:flex" />
+      <UButton
+        label="Sign in"
+        color="white"
+        variant="ghost"
+        trailing-icon="i-heroicons-arrow-right-20-solid"
+        class="hidden lg:flex"
+      />
     </template>
 
     <template #panel>
       <UAsideLinks :links="links" />
 
       <UDivider class="my-6" />
 
-      <UButton label="Sign in" color="white" block class="mb-3" />
-      <UButton label="Get started" block />
+      <UButton
+        label="Sign in"
+        color="white"
+        block
+        class="mb-3"
+      />
+      <UButton
+        label="Get started"
+        block
+      />
     </template>
   </UHeader>
 </template>
diff --git a/components/Placeholder.vue → components/ImagePlaceholder.vue b/components/Placeholder.vue → components/ImagePlaceholder.vue
@@ -2,7 +2,10 @@
   <div class="relative">
     <div class="bg-background border-gradient rounded-xl p-4">
       <div class="aspect-w-16 aspect-h-9 rounded-lg relative overflow-hidden border border-dashed border-gray-950/10 dark:border-white/10">
-        <svg class="absolute inset-0 h-full w-full stroke-gray-950/10 dark:stroke-white/10" fill="none">
+        <svg
+          class="absolute inset-0 h-full w-full stroke-gray-950/10 dark:stroke-white/10"
+          fill="none"
+        >
           <defs>
             <pattern
               id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
@@ -15,7 +18,12 @@
               <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
             </pattern>
           </defs>
-          <rect stroke="none" fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)" width="100%" height="100%" />
+          <rect
+            stroke="none"
+            fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
+            width="100%"
+            height="100%"
+          />
         </svg>
       </div>
     </div>

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -3,6 +3,7 @@ export default defineNuxtConfig({
   extends: ['@nuxt/ui-pro'],
   modules: [
     '@nuxt/content',
+    '@nuxt/eslint',
     '@nuxt/ui',
     '@nuxt/fonts'
   ],
@@ -14,5 +15,13 @@ export default defineNuxtConfig({
   },
   typescript: {
     strict: false
+  },
+  eslint: {
+    config: {
+      stylistic: {
+        commaDangle: 'never',
+        braceStyle: '1tbs'
+      }
+    }
   }
 })
diff --git a/package.json b/package.json
@@ -20,8 +20,8 @@
     "nuxt": "^3.11.2"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.3.9",
-    "eslint": "^8.57.0",
+    "@nuxt/eslint": "^0.3.9",
+    "eslint": "^9.1.1",
     "vue-tsc": "^2.0.14"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
@@ -11,51 +11,122 @@ useSeoMeta({
 
 <template>
   <div>
-    <ULandingHero :title="page.hero.title" :description="page.hero.description" :links="page.hero.links">
+    <ULandingHero
+      :title="page.hero.title"
+      :description="page.hero.description"
+      :links="page.hero.links"
+    >
       <template #headline>
-        <UBadge v-if="page.hero.headline" variant="subtle" size="lg" class="relative rounded-full font-semibold">
-          <NuxtLink :to="page.hero.headline.to" target="_blank" class="focus:outline-none" tabindex="-1">
-            <span class="absolute inset-0" aria-hidden="true" />
+        <UBadge
+          v-if="page.hero.headline"
+          variant="subtle"
+          size="lg"
+          class="relative rounded-full font-semibold"
+        >
+          <NuxtLink
+            :to="page.hero.headline.to"
+            target="_blank"
+            class="focus:outline-none"
+            tabindex="-1"
+          >
+            <span
+              class="absolute inset-0"
+              aria-hidden="true"
+            />
           </NuxtLink>
 
           {{ page.hero.headline.label }}
 
-          <UIcon v-if="page.hero.headline.icon" :name="page.hero.headline.icon" class="ml-1 w-4 h-4 pointer-events-none" />
+          <UIcon
+            v-if="page.hero.headline.icon"
+            :name="page.hero.headline.icon"
+            class="ml-1 w-4 h-4 pointer-events-none"
+          />
         </UBadge>
       </template>
 
-      <Placeholder />
+      <ImagePlaceholder />
 
-      <ULandingLogos :title="page.logos.title" align="center">
-        <UIcon v-for="icon in page.logos.icons" :key="icon" :name="icon" class="w-12 h-12 lg:w-16 lg:h-16 flex-shrink-0 text-gray-900 dark:text-white" />
+      <ULandingLogos
+        :title="page.logos.title"
+        align="center"
+      >
+        <UIcon
+          v-for="icon in page.logos.icons"
+          :key="icon"
+          :name="icon"
+          class="w-12 h-12 lg:w-16 lg:h-16 flex-shrink-0 text-gray-900 dark:text-white"
+        />
       </ULandingLogos>
     </ULandingHero>
 
-    <ULandingSection :title="page.features.title" :description="page.features.description" :headline="page.features.headline">
-      <UPageGrid id="features" class="scroll-mt-[calc(var(--header-height)+140px+128px+96px)]">
-        <ULandingCard v-for="(item, index) in page.features.items" :key="index" v-bind="item" />
+    <ULandingSection
+      :title="page.features.title"
+      :description="page.features.description"
+      :headline="page.features.headline"
+    >
+      <UPageGrid
+        id="features"
+        class="scroll-mt-[calc(var(--header-height)+140px+128px+96px)]"
+      >
+        <ULandingCard
+          v-for="(item, index) in page.features.items"
+          :key="index"
+          v-bind="item"
+        />
       </UPageGrid>
     </ULandingSection>
 
-    <ULandingSection :title="page.pricing.title" :description="page.pricing.description" :headline="page.pricing.headline">
-      <UPricingGrid id="pricing" compact class="scroll-mt-[calc(var(--header-height)+140px+128px+96px)]">
-        <UPricingCard v-for="(plan, index) in page.pricing.plans" :key="index" v-bind="plan" />
+    <ULandingSection
+      :title="page.pricing.title"
+      :description="page.pricing.description"
+      :headline="page.pricing.headline"
+    >
+      <UPricingGrid
+        id="pricing"
+        compact
+        class="scroll-mt-[calc(var(--header-height)+140px+128px+96px)]"
+      >
+        <UPricingCard
+          v-for="(plan, index) in page.pricing.plans"
+          :key="index"
+          v-bind="plan"
+        />
       </UPricingGrid>
     </ULandingSection>
 
-    <ULandingSection :headline="page.testimonials.headline" :title="page.testimonials.title" :description="page.testimonials.description">
-      <UPageColumns id="testimonials" class="xl:columns-4 scroll-mt-[calc(var(--header-height)+140px+128px+96px)]">
-        <div v-for="(testimonial, index) in page.testimonials.items" :key="index" class="break-inside-avoid">
+    <ULandingSection
+      :headline="page.testimonials.headline"
+      :title="page.testimonials.title"
+      :description="page.testimonials.description"
+    >
+      <UPageColumns
+        id="testimonials"
+        class="xl:columns-4 scroll-mt-[calc(var(--header-height)+140px+128px+96px)]"
+      >
+        <div
+          v-for="(testimonial, index) in page.testimonials.items"
+          :key="index"
+          class="break-inside-avoid"
+        >
           <ULandingTestimonial v-bind="testimonial" />
         </div>
       </UPageColumns>
     </ULandingSection>
 
     <ULandingSection class="bg-primary-50 dark:bg-primary-400 dark:bg-opacity-10">
-      <ULandingCTA v-bind="page.cta" :card="false" />
+      <ULandingCTA
+        v-bind="page.cta"
+        :card="false"
+      />
     </ULandingSection>
 
-    <ULandingSection id="faq" :title="page.faq.title" :description="page.faq.description" class="scroll-mt-[var(--header-height)]">
+    <ULandingSection
+      id="faq"
+      :title="page.faq.title"
+      :description="page.faq.description"
+      class="scroll-mt-[var(--header-height)]"
+    >
       <ULandingFAQ
         multiple
         :items="page.faq.items"