SFC section order

[devinschumacher]

plot twist. i found this in the docs which is very convenient: https://nuxt.com/docs/api/commands/add

it allows you to quickly scaffold up file starters for things like pages/layouts/components/etc. with all the default sections, etc.

<script setup lang="ts"></script>

<template>
  <div>
    Layout: default
    <slot />
  </div>
</template>

<style scoped></style>

but it uses this order:

1. script
2. template
3. style

i think we had decided on doing:

1. template
2. script
3. style

but that would mean we cant use this which would kinda be a waste of a time saver.

thoughts? @dawaltconley

---

Same with shadcn-vue components, example:

<script setup lang="ts">
import { cva } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline:
          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-9 rounded-md px-3',
        lg: 'h-11 rounded-md px-8',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

interface Props {
  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
  as?: string
}

// eslint-disable-next-line vue/define-macros-order
withDefaults(defineProps<Props>(), {
  as: 'button',
})
</script>

<template>
  <component
    :is="as"
    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
  >
    <slot />
  </component>
</template>

[dawaltconley]

It depends how much you want to preserve the current ordering; but this is something that eslint can autofix, meaning it should be possible to run pnpm eslint --fix to automatically reorder those after scaffolding / adding. It'll also reorder them the first time you save in your editor.

But if you want to be consistent with shadcn etc we can also just change the rule and run fix on the project to update; easy either way.