• formation Grafikart
• doc officielle, guide de démarrage (disponible en français, cf. bouton en haut à droite, à droite de Partners)

Pour connaître la version utilisée,

npm list vue

… le fichier package.json ne contient pas la version exacte (^3.4.29 → et 3.5.8 via npm list vue !)

Avoir node d'installé et npm, yarn ou autre
Avoir une bonne connaissance de JS, dont les fonctions fléchées, les map, filter, reduce

npm create vue@latest

qui va demander à installer le package create-vue si nécessaire, puis poser des questions à commencer par le nom du projet puis les dépendances (pour commencer, on répond non pour toutes)
une fois le projet créé, il nous invite à basculer dedans, lancer l'installation des dépendances et démarrer le serveur

cd nom-projet
npm install
# dans un onglet, exécuter 
npm run dev

Lancer Codium/VSC ou votre éditeur de code préféré, puis ouvrez le fichier

App.vue

<script setup></script>
 
<template>
  <h1>You did it!</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>
</template>
 
<style scoped></style>

On peut considérer que la partie <template> est le squelette et la partie <script> le _cerveau_

Commençons par remplacer le titre :

App.vue

<script setup>
  import { ref } from 'vue'
 
  const mon_titre = ref('Mon Titre')
</script>
 
<template>
  <h1>{{ mon_titre }}</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>
</template>
 
<style scoped></style>

L'essentiel est dans l'ajout pour la partie script de la définition de l'objet mon_titre qui est ensuite injecté dans le template en le mettant entre double-accolades.

doc officielle sur les directives