Comment ? / How To ?

Comment créer le squelette de notre application

Prérequis

Afin de pouvoir suivre ce guide, il faut préalablement avoir installé Nuxt.js.

Comment procéder ?

Recommandation

Pour vous familiariser avec le concept de layout de Nuxt.js, il est fortement recommandé de lire la documentation associée disponible ici.

On se propose ici de créer une application avec trois sections : Plats, Boissons et Menus. Chaque section correspondra à une route, respectivement /plat, /boisson et /menu. Ces trois sections seront toujours accessibles depuis n’importe quelle page de notre application sous la forme d’un en-tête composé de trois boutons.

Pour parvenir à construire notre application nous allons créer un layout par défaut.

Créer un layout par défaut

Créer un dossier layouts à la racine du projet :

mkdir layouts

Le layout par défaut devra s’appeler default.vue afin d’être appliqué à toutes les pages de l’application. Créer le fichier layouts/default.vue :

touch layouts/default.vue

<template>
  <div class="restauratec-main">
    <div class="restauratec-header">
      <div class="restauratec-header-nav-button restauratec-header-plat btn btn-outline-primary">
        <NuxtLink to="/plat" class="restauratec-header-link">Plats</NuxtLink>
      </div>
      <div class="restauratec-header-nav-button restauratec-header-boisson btn btn-outline-primary">
        <NuxtLink to="/boisson" class="restauratec-header-link">Boissons</NuxtLink>
      </div>
      <div class="restauratec-header-nav-button restauratec-header-menu btn btn-outline-primary">
        <NuxtLink to="/menu" class="restauratec-header-link">Menus</NuxtLink>
      </div>
    </div>
    <div class="restauratec-body">
      <Nuxt />
    </div>
  </div>
</template>

On peut voir le résultat en lançant la commande :

npm run dev

Puis en se rendant sur :

 http://localhost:3000/

Layout_step1

Créer les sous-sections de notre application

Pour le moment, le header est bien affiché, mais les liens ne mènent vers aucune page. Par exemple sur http://localhost:3000/plat:

Layout_notfound

Pour cela, créons les fichiers suivants :

touch pages/Plat.vue pages/Boisson.vue pages/Menu.vue
  • pages/Plat.vue :
<template>
  <h1>Mes plats</h1>
</template>
  • pages/Boisson.vue :
<template>
  <h1>Mes boissons</h1>
</template>
  • pages/Menu.vue :
<template>
  <h1>Mes menus</h1>
</template>

Tester nos modifications

Lancer la commande de serveur de développement Nuxt.js :

npm run dev

On peut vérifier alors le résultat sur http://localhost:3000/boisson :

Layout_boisson

Et ensuite ?

Comment ajouter un style global à l’application