Quiz Nuxt confirmé

1

Dans le répertoire /components, comment s'utilise automatiquement le composant components/button/Primary.vue dans une page ?

import ButtonPrimary from '@/components/button/Primary.vue'
Il suffit d'utiliser <ButtonPrimary />
Il faut l'enregistrer d'abord dans app.vue
En utilisant <button-primary /> uniquement s'il est au niveau racine

2

Quel composable fourni par Nuxt est recommandé pour récupérer des données depuis une API en prévenant les requêtes en double (SSR vs Client) ?

useFetch
axios.get
fetch
useAsync()

3

Comment appliquer un gabarit réutilisable (layout) spécifique nommé 'admin' à une page ?

Créer un fichier layouts/admin.vue et déclarer definePageMeta({ layout: 'admin' }) dans la page.
Placer la page directement dans un dossier pages/admin/.
Déclarer le layout conditionnel dans nuxt.config.ts.
Ce n'est pas possible, tout doit être géré dans app.vue.

4

À quoi sert le répertoire /server dans un projet Nuxt ?

À configurer physiquement l'hébergement du site côté matériel
À créer des routes d'API, des middlewares serveur et exécuter de la logique backend
À définir de manière exclusive le fichier package.json
À isoler du code qui requiert des droits d'administrateur système

5

Concrètement, comment se différencie le composable natif useFetch par rapport à un appel classique avec $fetch ?

useFetch prévient les duplications de requêtes réseau lors du passage du serveur (SSR) au client, grâce à l'état réactif
useFetch est l'implémentation de la spécification Fetch de Node.js et $fetch une lib tierce obsolète
Il n'y a aucune différence réelle de fonctionnement
useFetch est réservé à Nuxt 2, $fetch aux nouveaux projets

6

Quelle est la manière recommandée de déclarer un middleware de route propre à chaque route sans avoir à l'inclure ? (Middleware global)

Créer le fichier au nom de mon-middleware.global.ts directement sous /middleware
Ajouter ce dernier manuellement et distinctement dans le tableau router.middleware du fichier texte nuxt.config.ts
Gérer exclusivement cela en amont dans App.vue de manière native
Créer une fonction asynchrone basique en global

7

Quel composable permet la manipulation pragmatique des balises head et de SEO (title, robots...) de n'importe où dans <script setup> ?

useHead() ou l'alternative spécialisée useSeoMeta()
this.$head() géré à l'origine avec vue-meta
Vue.use(Head) dans un plugin local
defineProps()

8

De quelle manière accède-t-on de façon sécurisée (notamment en SSR) aux données issues des variables d'environnement (.env) ?

useRuntimeConfig() après enregistrement en prérequis côté config
process.env.MON_VAR comme au sein de Node.js via le webpack.DefinePlugin
On interroge explicitement l'objet Window : window.env
import.meta.env comme sous Vite de manière nue

9

Vous êtes en mode développement de l'application Nuxt, comment invalider son rendu côté serveur de façon intégrale (Mode SPA intégral) ?

En fixant la clé racine ssr: false dans la configuration générale du projet (nuxt.config.ts)
En modifiant via CLI par nuxi run --target=spa
Cela n'est pas autorisé. On fait alors une simple application Vue.
Il suffit de rajouter purement et logiquement un composant unique <ClientOnly> de l'architecture

10

Quel nom a formellement attitré Nuxt pour lister et accueillir les méthodes auto-importées partagées concernant la logique de votre vue ou gestion d'état ?

composables
utils
helpers
logic