What is the best way to structure a component with the new Vue 3 script setup?

[JoaoHamerski]

So now we have the new

<script setup>
   //
</script>

Which is great and I'm loving to use it, but I noticed everything can be placed wherever the developer want, doesn't seems to have a standard, not even some eslint rule to preventing a structure in such files, as we have in Options API.

I wonder what's the best way to organize a component file .vue like that?

Here's some simple example of what way I'm taking on this type of scripts:

<script setup>
import { computed } from 'vue'
import { ref } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'text'
  }
})

const type = ref(props.type)

const isPassword = computed(() => {
  return props.type === 'password'
})

const passwordIconVisibility = computed(() => {
  return type.value === 'password'
    ? 'visibility_off'
    : 'visibility'
})

const togglePasswordVisibility = () => {
  type.value = type.value === 'password' 
    ? 'text' 
    : 'password'
}
</script>

[angelhdzdev]

Yeah, pretty much that's it.

The same way we would organize stuff in a class.
imports first, then fields, then getters/setters,
and then methods.

So in a Vue SFC:
imports
Compiler macros (defineProps, defineEmits, definePage (unplugin-vue-router), definePageMeta (Nuxt 3)
props
pinia stores
computed/watchers
life-cycle hooks
methods

Hope I could help. Wishing you health and success. Have fun!

[LinusBorg]

While I agree that props etc being at the top, in usually don't support stuff by "type" but rather by feature.

A ref, computed, watch and lifecycle hook may belong together as a feature, so I put them together.

Otherwise, you are just sorting by "type of thing" like you do in Options API.

[angelhdzdev]

@banlify would you have the descency explaining why my answer is laughable!?

Unless the laughing reaction was a mistake.

But if it wasn't a mistake, illuminate us with your wisdom.

[libondev]

@banlify would you have the descency explaining why my answer is laughable!?

Unless the laughing reaction was a mistake.

But if it wasn't a mistake, illuminate us with your wisdom.

I think there may be a little misunderstanding between us. This is a way for us to be friendly.

There is no problem with your answer.

I'm sorry for making you misunderstand, i don't know if doing this will mislead you.

I'm really sorry, Hope it doesn't have an impact on your life, wish you a happy life ☺

[angelhdzdev]

Thank you a lot for explaning. I don't know if you are aware of the issue, but the laughing reaction is being used nowadays in all social media as a way to attack answers. So I'm in constant defensive mode because I also suffer from Generalized Anxiety.
I don't want issues, but there have been people that really used the laugh reaction to attack me, and it showed when I asked them.

I did what's correct, I asked you, instead of assuming.

Usually, people choose the heart, the thumbs up, the party hat with confetti, or the rocket to show appreciation to an answer.

Anyway, we are all good. Good luck everyone and wish you health. Have fun!