VueJS

Performance tracing

Vuejs Vous permet de tracer le problème de performance de votre aplication

const app = createApp({})
app.config.performance = true

30.09.2022

Reactive bonding dans la balise style

<style scoped>  
.button {
    color: v-bind(buttonColor)
}
</style>

30.09.2022

Utiliser le v-model simplement

Quand on veut utiliser v-model pour synchroniser un state entre le parent et l'enfant il faut récupérer une valeur du parent via le props et renvoyer les modifications via un event.

Voici ma manière de faire ca avec une computed qui facilite la synchro en interne dans le composant enfant.

const props = defineProps<{ modelValue: string[]}>()
const { modelValue } = toRefs(props)
const emits = defineEmits(['update:modelValue'])

const tags = computed({
    get: () => modelValue.value,
    set: value => emit('update:modelValue', value),
})

29.09.2022

VSCode Snippets for vue

Le snippet VSCode que j’utilise pour créer un nouveau composant.

{
  "rg-vue3-ts-setup": {
    "prefix": "rg-vue3-ts-setup",
    "body": [
      "<template>",
      "  <div><h1>Hello $TM_FILENAME_BASE !</h1></div>",
      "</template>",
      "",
      "<script lang=\"ts\" setup>",
      "</script>",
      "",
      "<style lang=\"scss\" scoped></style>",
      ""
    ],
    "description": "Create vue 3 template"
  }
}

Snippets v-for

{
  "rg-vue-for": {
        "prefix": "rg-vue-for",
        "body": "v-for=\"$1\" :key=\"$2\"",
        "description": "v-for complete"
    }
}