chore(linting): add nuxt linting rules

Author: sfxcode

app/assets/sass/sidebar.scss

@@ -8,7 +8,7 @@
   $item-line-height: 18px,
   $item-padding: 8px 14px,
   $icon-height: 32px,
-  $icon-width: 32px,
+  $icon-width: 32px
 );
 
 .v-sidebar-menu hr {

app/components/AdvertiseBox.vue

@@ -17,7 +17,7 @@ defineProps({
 
 <template>
   <div class="mb-4 px-5">
-    <span class="shadow-2 mb-1 inline-block p-3" style="border-radius: 10px">
+    <span class="shadow-2 mb-1 p-3 inline-block" style="border-radius: 10px">
       <span :class="`text-2xl text-${color} i-${icon}`" />
     </span>
     <div :class="`mb-3 text-2xl text-${color}`">

app/components/app/AppColorMode.vue

@@ -19,11 +19,11 @@ watchEffect(() => mode.value = state.value)
   <div>
     <client-only>
       <Button @click="next()">
-        <i v-if="mode === 'dark'" i-carbon-moon inline-block align-middle class="align-middle" />
-        <i v-if="mode === 'light'" i-carbon-sun inline-block align-middle class="align-middle" />
-        <i v-if="mode === 'cafe'" i-carbon-cafe inline-block align-middle class="align-middle" />
-        <i v-if="mode === 'contrast'" i-carbon-contrast inline-block align-middle class="align-middle" />
-        <i v-if="mode === 'auto'" i-carbon-laptop inline-block align-middle class="align-middle" />
+        <i v-if="mode === 'dark'" i-carbon-moon align-middle inline-block class="align-middle" />
+        <i v-if="mode === 'light'" i-carbon-sun align-middle inline-block class="align-middle" />
+        <i v-if="mode === 'cafe'" i-carbon-cafe align-middle inline-block class="align-middle" />
+        <i v-if="mode === 'contrast'" i-carbon-contrast align-middle inline-block class="align-middle" />
+        <i v-if="mode === 'auto'" i-carbon-laptop align-middle inline-block class="align-middle" />
         <span class="ml-2 capitalize">{{ mode }}</span>
       </Button>
     </client-only>

app/components/app/AppFooter.vue

@@ -4,7 +4,7 @@ const config = useRuntimeConfig()
 
 <template>
   <div class="layout-footer mt-4">
-    <span class="ml-2 font-medium">{{ config.public.APP_NAME }} - {{ config.public.APP_VERSION }}</span>
+    <span class="font-medium ml-2">{{ config.public.APP_NAME }} - {{ config.public.APP_VERSION }}</span>
   </div>
 </template>
 

app/components/app/AppSidebar.vue

@@ -51,7 +51,7 @@ onMounted(() => {
         </div>
       </template>
       <template #footer>
-        <div class="m-2 text-center text-xs text-color-primary">
+        <div class="text-xs text-color-primary m-2 text-center">
           <span v-if="!collapsed">PrimeVue-Nuxt Starter {{ config.public.APP_VERSION }}</span>
           <span v-if="collapsed">{{ config.public.APP_VERSION }}</span>
         </div>

app/pages/404.vue

@@ -7,15 +7,15 @@ const router = useRouter()
     <div class="col-12 mt-10 text-center">
       <img src="/nuxt-logo.svg" alt="Nuxt logo" class="mb-5" style="width:81px; height:60px;">
     </div>
-    <main class="px-4 py-10 text-center text-8xl text-teal-700">
+    <main class="text-8xl text-teal-700 px-4 py-10 text-center">
       <div>
         <p class="text-8xl text-red-600">
           <span class="i-codicon-error inline-block" />
         </p>
       </div>
     </main>
     <div style="alignment: center">
-      <h1 class="text-center text-2xl text-5xl font-bold">
+      <h1 class="text-2xl text-5xl font-bold text-center">
         Page not found ...
       </h1>
       <div class="col-12 mt-5 text-center">

app/pages/data/server.vue

@@ -10,7 +10,7 @@ const count = useCounter()
     <PageView />
     <h2>Counter (useState)</h2>
 
-    <div class="grid grid-cols-3 mt-8 w-80">
+    <div class="mt-8 grid grid-cols-3 w-80">
       <Button icon="pi pi-plus" class="p-button-rounded p-button-info" @click="count.inc()" />
       <span class="text-4xl">{{ count.count }}</span>
       <Button icon="pi pi-minus" class="p-button-rounded p-button-success" @click="count.dec()" />

app/pages/index.vue

@@ -4,15 +4,15 @@ import AdvertiseBox from '@/components/AdvertiseBox.vue'
 
 <template>
   <div class="card surface-0 text-center">
-    <div class="mb-3 text-4xl font-bold">
+    <div class="text-4xl font-bold mb-3">
       <span class="text-green-600">PrimeVue </span>
       <span class="text-blue-400"> & TypeScript</span>
       <span class="text-green-400"> & Nuxt 3</span>
     </div>
-    <h2 class="pb-6 text-2xl">
+    <h2 class="text-2xl pb-6">
       Starter for Vue.js Development with Nuxt 3.
     </h2>
-    <div class="grid grid-cols-2 gap-2 lg:grid-cols-3">
+    <div class="gap-2 grid grid-cols-2 lg:grid-cols-3">
       <AdvertiseBox header="PrimeVue 4.2.x" icon="prime-check-circle" color="green-600">
         Excellent <ExternalLink href="https://github.com/sfxcode/formkit-primevue" text="Component Library" /> for VUE
       </AdvertiseBox>

app/pages/ui/icons.vue

@@ -7,19 +7,19 @@
     <h2>Icons by UnoCSS</h2>
     <div class="i-logos-vue text-6xl" />
     <h3>Iconset: MDI</h3>
-    <div class="grid grid-cols-3 mt-6">
+    <div class="mt-6 grid grid-cols-3">
       <div class="i-mdi-information text-green-600-500-500 text-4xl" />
       <div class="i-mdi-alarm text-4xl text-blue-500" />
       <div class="i-mdi-github-circle text-4xl text-purple-500" />
     </div>
     <h3>Iconset: TWEMOJI</h3>
-    <div class="grid grid-cols-3 mt-6">
+    <div class="mt-6 grid grid-cols-3">
       <div class="i-twemoji-1st-place-medal text-4xl" />
       <div class="i-twemoji-2nd-place-medal text-4xl" />
       <div class="i-twemoji-3rd-place-medal text-4xl" />
     </div>
     <h3>Iconset: Prime</h3>
-    <div class="grid grid-cols-3 mt-6">
+    <div class="mt-6 grid grid-cols-3">
       <div class="i-prime-home text-4xl" />
       <div class="i-prime-comments text-4xl text-green-400" />
       <div class="i-prime-check-circle" />

app/pages/ui/uno.vue

@@ -5,20 +5,17 @@ const config = useRuntimeConfig()
 <template>
   <div class="card">
     <h2>UnoCSS</h2>
-    <div h-full flex select-none text-center all:transition-400>
+    <div text-center flex h-full select-none all:transition-400>
       <div ma>
-        <div animate-5s animate-bounce-alt animate-count-infinite text-6xl font-bold fw100>
+        <div animate-5s text-6xl font-bold fw100 animate-bounce-alt animate-count-infinite>
           unocss
         </div>
-        <div m1 text-lg fw300 dark:op30>
+        <div text-lg fw300 m1 dark:op30>
           The instant on-demand Atomic CSS engine.
         </div>
         <div
-          m2
-          flex
-          justify-center
-          text-2xl
-          dark:op30
+
+          text-2xl m2 flex justify-center dark:op30
           hover="op80"
         >
           <a
@@ -32,7 +29,7 @@ const config = useRuntimeConfig()
     </div>
     <div
 
-      bottom-5 left-0 right-0 text-center fw300 dark:op30
+      fw300 text-center bottom-5 left-0 right-0 dark:op30
     >
       on-demand · instant · fully customizable
     </div>
@@ -48,7 +45,7 @@ const config = useRuntimeConfig()
         <a href="../__unocss" target="_blank">
           <div class="i-mdi-information text-green-600-500-500 text-4xl" />
         </a>
-        <article class="pt-4 text-base prose prose-truegray xl:text-xl">
+        <article class="prose-truegray text-base pt-4 prose xl:text-xl">
           View, play and analyse rules and setup ...
         </article>
       </div>