Skip to content

4. Voorbeeld [nuxt-01]: routing en navigatie

We gaan een reeks eenvoudige voorbeelden opstellen om stap voor stap te ontdekken hoe een [nuxt]-applicatie werkt. We beginnen met het overzetten van de applicatie [vuejs-11] uit het document |Inleiding tot het VUE.JS-framework aan de hand van een voorbeeld|, om eerst te ontdekken wat het verschil is tussen de codestructuur van een [nuxt]-toepassing en die van een [vue]-toepassing.

4.1. Projectstructuur

Het project [vuejs-11] was een project voor het navigeren tussen weergaven:

Image

De broncodestructuur van het project [vuejs-11] zag er als volgt uit:

Image

  • [main.js] was het script dat werd uitgevoerd bij het opstarten van de applicatie [vue];
  • [router.js] legde de routeringsregels vast;
  • [App.vue] was de structurerende weergave van de applicatie. Deze organiseerde de lay-out van de verschillende weergaven;
  • [Component1, Component2, Component3, Layout, Navigation] waren de componenten die in de verschillende weergaven van de applicatie werden gebruikt;

Bij de porting van de applicatie [vue] [1] naar een applicatie [nuxt] [2]:

  • moeten de scripts die bij het opstarten van de applicatie worden uitgevoerd, worden gedeclareerd in de sleutel [plugins] van het bestand [nuxt.config.js]. Bovendien is het mogelijk om de scripts voor de server [nuxt] te scheiden van die voor de client [nuxt];
  • de weergave [App.vue] moet in de map [layouts] worden geïnstalleerd en hernoemd worden naar [default.vue];
  • de componenten [Component1, Component2, Component3] die het doel van de routering zijn, moeten worden verplaatst naar de map [pages]. Een daarvan, die als startpagina dient, moet worden hernoemd naar [index.vue]. We hebben hier de bestanden hernoemd:
    • [Component1] --> [index]: toont de tekst [Home];
    • [Component2] --> [page1]: geeft de tekst [Page 1] weer;
    • [Component3] --> [page2]: geeft de tekst [Page 2] weer;

[nuxt] gebruikt de inhoud van de map [pages] om de volgende routes dynamisch te genereren:

1
2
3
{ name :’index’, ‘path’ :’/’}
{ name :’page1’, ‘path’ :’/page1’}
{ name :’page2’, ‘path’ :’/page2’}

Daardoor wordt het bestand [router.js] dat in het project [vue] wordt gebruikt, overbodig in het project [nuxt].

Het configuratiebestand [nuxt.config.js] ziet er als volgt uit:


export default {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: {
    title: 'Introduction à [nuxt.js]',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'ssr routing loading asyncdata middleware plugins store'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#fff' },
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios'
  ],
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {},
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  },
  // broncodemap
  srcDir: 'nuxt-01',
  // router
  router: {
    // hoofdmap van de applicatie
    base: '/nuxt-01/'
  },
  // server
  server: {
    // servicepoort, standaard 3000
    port: 81,
    // netwerkadressen waarop wordt geluisterd, standaard localhost: 127.0.0.1
    // 0.0.0.0 = alle netwerkadressen van de machine
    host: '0.0.0.0'
  }
}
  • regel 62: hier wordt de map aangegeven die de broncode van het project [dvp] bevat;
  • regel 66: hier wordt de hoofdmap van de applicatie [dvp] opgegeven (dit kan naar eigen keuze worden ingesteld);
  • regel 43: merk op dat de bibliotheek [bootstrap-vue] in de configuratie wordt vermeld;

4.2. Porting van het bestand [main.js]

Het bestand [main.js] van het project [vuejs-11] zag er als volgt uit:


// imports
import Vue from 'vue'
import App from './App.vue'

// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// router
import monRouteur from './router'

// configuratie
Vue.config.productionTip = false

// projectinstantiëring [App]
new Vue({
  name: "app",
  // hoofdweergave
  render: h => h(App),
  // router
  router: monRouteur,
}).$mount('#app')

Afgezien van [imports] doet de code het volgende:

  • regels 5-11: gebruik van de bibliotheek [bootstrap-vue]. Dit wordt nu gedaan door de module [bootstrap-vue/nuxt] op regel 43 van het configuratiebestand [nuxt.config.js];
  • regels 14 en 25: gebruik van het routeringsbestand [router.js]. Dit wordt nu automatisch gedaan door de applicatie [nuxt] op basis van de mappenstructuur van de map [pages];
  • regels 20-26: het instantiëren van de hoofdweergave van de applicatie. In een [nuxt]-applicatie fungeert de weergave [layouts/default.vue] als hoofdweergave;

Het bestand [main.js] is nu overbodig geworden. Als het nog een functie had gehad, zou dit zijn aangegeven in de sleutel [plugins] op regel 30 van het configuratiebestand [nuxt.config.js];

4.3. De hoofdweergave [default.vue]

Image

De hoofdweergave [layouts / default.vue] ziet er als volgt uit:


<template>
  <div class="container">
    <b-card>
      <!-- een bericht -->
      <b-alert show variant="success" align="center">
        <h4>[nuxt-01] : routage et navigation</h4>
      </b-alert>
      <!-- het huidige routeringsscherm -->
      <nuxt />
    </b-card>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
  • Op regel 9, in het project [vuejs-11], stond de tag <router-view /> in plaats van de tag <nuxt /> die hier wordt gebruikt. Beide lijken bruikbaar. Ik heb ze allebei geprobeerd, maar zag geen verschil. Ik heb de tag <nuxt /> behouden, omdat die wordt aanbevolen. Deze geeft de huidige weergave weer, d.w.z. de doelpagina van de huidige routing;

4.4. De componenten

Image

In vergelijking met het project [vuejs-11] zijn de componenten [layout, navigation] ongewijzigd gebleven:

[components / layout.vue]


<!-- indeling van de weergaven -->
<template>
  <!-- regel -->
  <div>
    <b-row>
      <!-- veld met twee kolommen -->
      <b-col v-if="left" cols="2">
        <slot name="left" />
      </b-col>
      <!-- gebied met tien kolommen -->
      <b-col v-if="right" cols="10">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>

<script>
export default {
  // instellingen
  props: {
    left: {
      type: Boolean
    },
    right: {
      type: Boolean
    }
  }
}
</script>

Deze component wordt gebruikt om de pagina's van de applicatie in twee kolommen te structureren:

  • regels 7-9: de linkerkolom bestaat uit 2 Bootstrap-kolommen;
  • regels 11-13: de rechterkolom met 10 Bootstrap-kolommen;

[navigation.vue]


<template>
  <!-- Bootstrap-menu met drie opties -->
  <b-nav vertical>
    <b-nav-item to="/" exact exact-active-class="active">
      Home
    </b-nav-item>
    <b-nav-item to="/page1" exact exact-active-class="active">
      Page 1
    </b-nav-item>
    <b-nav-item to="/page2" exact exact-active-class="active">
      Page 2
    </b-nav-item>
  </b-nav>
</template>

Dit onderdeel toont drie navigatielinks:

Image

Om te weten welke waarde je moet invoeren voor de attributen [to] in de regels 4, 7 en 10, moet je de map [pages] [2] raadplegen:

  • de pagina [index] krijgt de waarden URL en [/];
  • de pagina [page1] zal de pagina’s URL en [/page1] bevatten;
  • de pagina [page2] zal de URL en [/page2] hebben;

De component [navigation] kan ook als volgt worden geschreven:


<template>
  <!-- Bootstrap-menu met drie opties -->
  <b-nav vertical>
    <nuxt-link to="/" exact exact-active-class="active">
      Home
    </nuxt-link>
    <nuxt-link to="/page1" exact exact-active-class="active">
      Page 1
    </nuxt-link>
    <nuxt-link to="/page2" exact exact-active-class="active">
      Page 2
    </nuxt-link>
  </b-nav>
</template>

De tag <b-nav-item> wordt vervangen door de tag <nuxt-link>, die een routeringslink aangeeft. Tijdens het uitvoeren heb ik geen groot verschil gezien, niets dat de balans zou doen doorslaan naar de ene tag in plaats van de andere.

4.5. De pagina’s

Image

De pagina [index.vue] toont het volgende beeld:

Image

De code van de pagina is als volgt:


<!-- hoofdpagina -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigatie -->
    <Navigation slot="left" />
    <!-- bericht-->
    <b-alert slot="right" show variant="warning">
      Home
    </b-alert>
  </Layout>
</template>

<script>
/* eslint-disable no-undef */
/* eslint-disable no-console */
/* eslint-disable nuxt/no-env-in-hooks */

import Navigation from '@/components/navigation'
import Layout from '@/components/layout'

export default {
  name: 'Home',
  // gebruikte componenten
  components: {
    Layout,
    Navigation
  },
  // levenscyclus
  beforeCreate(...args) {
    console.log('[home beforeCreate]', 'process.server=', process.server,
'process.client=', process.client, "aantal argumenten=", args.length)
  },
  created(...args) {
    console.log('[home created]', 'process.server=', process.server,
'process.client=', process.client, "aantal argumenten=", args.length)
  },
  beforeMount(...args) {
    console.log('[home beforeMount]', 'process.server=', process.server,
'process.client=', process.client, "aantal argumenten=", args.length)
  },
  mounted(...args) {
    console.log('[home mounted]', 'process.server=', process.server,
'process.client=', process.client, "aantal argumenten=", args.length)
  }
}
</script>
  • regel 5: de navigatiecomponent is in de linkerkolom geplaatst;
  • regels 7-9: er wordt een melding in de rechterkolom geplaatst;

In het gedeelte <script> plaatsen we code in de functies van de levenscyclus van de pagina [beforeCreate, created, beforeMount, beforeMounted]. We willen weten welke functies door de []nuxt-server worden uitgevoerd en welke door de client [nuxt]. We herinneren aan twee zaken:

  • wanneer een pagina wordt opgevraagd, hetzij bij het opstarten van de applicatie, zoals bij de pagina [index], of handmatig door de gebruiker die de pagina in de browser vernieuwt of een URL handmatig invoert, wordt deze eerst door de server [nuxt] geleverd. Deze interpreteert de bovenstaande code en voert de JavaScript-code uit die erin staat;
  • wanneer de door de server [nuxt] verzonden pagina bij de browser aankomt, bevat deze de clientcode [nuxt]. Deze interpreteert de bovenstaande pagina opnieuw;
  • aan de hand van logbestanden willen we weten wie wat doet om dit proces beter te begrijpen;
  • regels 30-31: in de functie wordt gebruikgemaakt van een globaal object [process] dat zowel op de server als op de client bestaat:
    • [process.server] is waar als de code door de server wordt uitgevoerd, anders is het onwaar;
    • [process.client] is waar als de code door de client wordt uitgevoerd, anders is het onwaar;
    • omdat de variabele [process] niet in de code is gedeclareerd, moeten we regel 14 toevoegen voor [eslint]. De regel [16] is nodig, omdat anders [eslint] een ander type fout meldt vanwege de variabele [process]. Is regel 15 nodig om het gebruik van [console] in de levenscyclusfuncties mogelijk te maken?
  • regel 29: we willen ook weten of de levenscyclusfuncties argumenten ontvangen. We zullen namelijk ontdekken dat [nuxt] informatie doorgeeft aan bepaalde functies. We willen weten of de levenscyclusfuncties daar deel van uitmaken;
  • we herhalen dezelfde code voor de vier functies;

4.6. Het bestand [nuxt.config.js]

Dit bestand regelt de uitvoering van het project [dvp]. Het is beschreven op pagina 33.

4.7. Uitvoering van het project

We voeren het project uit:

Image

De volgende pagina wordt weergegeven:

Image

Zodra de applicatie [nuxt] in de browser is geïnstalleerd, wordt deze een standaard [vue]-applicatie. We zullen daarom niet ingaan op de client-werking van de applicatie [nuxt-01]. Dit is al gedaan in het project [vuejs-11] van het document |Inleiding tot het VUE.JS-framework aan de hand van een voorbeeld|.

De applicatie [nuxt] verschilt slechts op twee punten van de applicatie [vue]:

  • het eerste opstarten van de applicatie, waarbij de startpagina wordt weergegeven;
  • telkens wanneer de gebruiker op de een of andere manier de browser laat verversen;

In beide gevallen:

  • wordt de opgevraagde pagina door de server geleverd;
  • wordt de ontvangen pagina door de client verwerkt;

Laten we eens kijken naar de logbestanden van het opstarten van de applicatie (F12 in de browser):

Image

  • in [1], de serverlogs (process.server=true). Deze worden voorafgegaan door de vermelding [Nuxt SSR] (SSR= Server Side Rendered);
  • in [2], de logbestanden van de client in de browser (process.client=true);

Uit deze logs kan worden afgeleid dat:

  • de server de functies [beforeCreate, created] van de levenscyclus uitvoert;
  • de client de functies [beforeCreate, created, beforeMount, mounted] van de levenscyclus uitvoert;
  • de server de pagina vóór de client heeft verwerkt;
  • in beide gevallen krijgt geen van de uitgevoerde functies argumenten;

Laten we nu eens kijken naar de broncode van de ontvangen pagina (optie [Code source de la page] in de browser):


<!doctype html>
<html data-n-head-ssr>
<head>
  <title>Introduction à [nuxt.js]</title>
  <meta data-n-head="ssr" charset="utf-8">
  <meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
  <meta data-n-head="ssr" data-hid="description" name="description" content="ssr routing loading asyncdata middleware plugins store">
  <link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
  <base href="/nuxt-01/">
  ....
  <link rel="preload" href="/nuxt-01/_nuxt/runtime.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/commons.app.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/vendors.app.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/app.js" as="script">
</head>
<body>
  <div data-server-rendered="true" id="__nuxt">
    <div id="__layout">
      <div class="container">
        <div class="card">
          <div class="card-body">
            <div role="alert" aria-live="polite" aria-atomic="true" align="center" class="alert alert-success">
              <h4>[nuxt-01] : routage et navigation</h4>
            </div>
            <div>
              <div class="row">
                <div class="col-2">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a href="/nuxt-01/" target="_self" class="nav-link active nuxt-link-active">
                        Home
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page1" target="_self" class="nav-link">
                        Page 1
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page2" target="_self" class="nav-link">
                        Page 2
                      </a>
                    </li>
                  </ul>
                </div> <div class="col-10">
                  <div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-warning">
                    Home
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    window.__NUXT__ = (function (a, b, c, d, e, f, g, h, i, j) {
      return {
        layout: "default", data: [{}], error: null, serverRendered: true,
        logs: [
          { date: new Date(1574069600078), args: [a, b, c, d, e, f, g, "(repeated 1 times)"], type: h, level: i, tag: j },
          { date: new Date(1574070938091), args: [a, b, c, d, e, f, g], type: h, level: i, tag: j }
        ]
      }
    }("[home beforeCreate]", "process.server=", "true", "process.client=", "false", "nombre d'arguments=", "0", "log", 2, ""));
  </script>
  <script src="/nuxt-01/_nuxt/runtime.js" defer></script>
  <script src="/nuxt-01/_nuxt/commons.app.js" defer></script>
  <script src="/nuxt-01/_nuxt/vendors.app.js" defer></script>
  <script src="/nuxt-01/_nuxt/app.js" defer></script>
</body>
</html>

Opmerkingen

  • Het eerste wat opvalt, is dat de ontvangen code HTML correct weergeeft wat de gebruiker ziet. Dit was niet het geval bij de applicaties [vue], waarbij de weergegeven broncode de broncode was van een vrijwel leeg HTML-bestand. Dat was wat de browser had ontvangen. Vervolgens nam de client [vue] het over en bouwde de pagina op die de gebruiker verwachtte. Je moest dan naar het tabblad [inspecteur] van de ontwikkeltools van de browser (F12) gaan om de code HTML van de weergegeven pagina te ontdekken;
  • regels 57-67: dit is het script dat de logs met de tag [Nuxt SSR] heeft weergegeven. Deze logs zijn aan de serverzijde gegenereerd en de resultaten zijn opgenomen in een script dat in de verzonden pagina is opgenomen;
  • regels 68-71: de scripts die de in de browser uitgevoerde client vormen;

De scripts in de regels 68-71 worden uitgevoerd en bewerken de ontvangen pagina. Om te zien welke pagina uiteindelijk aan de gebruiker wordt getoond, moet u naar het tabblad [inspecteur] van de ontwikkeltools van de browser (F12) gaan:

Image

Wanneer je de tag <html> [3] uitvouwt, zie je de volgende inhoud:


<head>
  <title>Introduction à [nuxt.js]</title>
  <meta data-n-head="ssr" charset="utf-8">
  <meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
  <meta data-n-head="ssr" data-hid="description" name="description" content="ssr routing loading asyncdata middleware plugins store">
  <link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
  <base href="/nuxt-01/">
  ...
  <link rel="preload" href="/nuxt-01/_nuxt/runtime.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/commons.app.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/vendors.app.js" as="script">
  <link rel="preload" href="/nuxt-01/_nuxt/app.js" as="script">

  <script charset="utf-8" src="/nuxt-01/_nuxt/pages_index.js"></script>
  <script charset="utf-8" src="/nuxt-01/_nuxt/pages_page1.js"></script>
  <script charset="utf-8" src="/nuxt-01/_nuxt/pages_page2.js"></script>
</head>
<body>
  <div id="__nuxt">
    <div id="__layout">
      <div class="container">
        <div class="card">
          <div class="card-body">
            <div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-success" align="center">
              <h4>[nuxt-01] : routage et navigation</h4>
            </div>
            <div>
              <div class="row">
                <div class="col-2">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a href="/nuxt-01/" target="_self" class="nav-link active nuxt-link-active">
                        Home
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page1" target="_self" class="nav-link">
                        Page 1
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page2" target="_self" class="nav-link">
                        Page 2
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="col-10">
                  <div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-warning">
                    Home
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    window.__NUXT__ = (function (a, b, c, d, e, f, g, h, i) {
      return {
        layout: "default", data: [{}], error: null, serverRendered: true,
        logs: [
          { date: new Date(1574068674481), args: ["[home beforeCreate]", a, b, c, d, e, f], type: g, level: h, tag: i },
          { date: new Date(1574068674482), args: ["[home created]", a, b, c, d, e, f], type: g, level: h, tag: i }
        ]
      }
    }("process.server=", "true", "process.client=", "false", "nombre d'arguments=", "0", "log", 2, ""));
  </script>
  <script src="/nuxt-01/_nuxt/runtime.js" defer=""></script>
  <script src="/nuxt-01/_nuxt/commons.app.js" defer=""></script>
  <script src="/nuxt-01/_nuxt/vendors.app.js" defer=""></script>
  <script src="/nuxt-01/_nuxt/app.js" defer=""></script>

  <iframe id="mc-sidebar-container" ...></iframe>
  <iframe id="mc-topbar-container"...>  </iframe>
  <iframe id="mc-toast-container" ...></iframe>
  <iframe id="mc-download-overlay-container"...></iframe>
</body>

Opmerkingen

  • op het eerste gezicht lijkt de weergegeven pagina (regels 19-59) dezelfde te zijn als de ontvangen pagina;
  • regels 14-16: er verschijnen drie nieuwe scripts, één voor elke pagina van de applicatie;
  • regels 76-79: er verschijnen vier [iframe];

Regels 33, 37 en 42: de links vormen een probleem. Het lijken normale links te zijn die, wanneer erop wordt geklikt, een verzoek naar de server sturen. Bij uitvoering blijkt echter dat dit niet het geval is: er wordt geen verzoek naar de server gestuurd. Om te begrijpen waarom, moeten we teruggaan naar het tabblad [inspecteur] in de browser:

Image

We zien dat in [1, 2] gebeurtenissen aan de links zijn gekoppeld. Het zijn de scripts op de regels 71-74 die gebeurtenishandlers aan de links hebben gekoppeld. Dus:

  • de pagina die door de client wordt weergegeven, is visueel identiek aan de pagina die door de server is verzonden;
  • er is door de client dynamisch gedrag aan de pagina toegevoegd;

Laten we nu de pagina [page1] opvragen door URL handmatig in te voeren als [http://192.168.1.128:81/nuxt-01/page1]. De logbestanden zien er dan als volgt uit:

Image

We krijgen dezelfde resultaten als voor de pagina [index], maar dan voor [page1]. De broncode van de ontvangen pagina is als volgt:


<body>
  <div data-server-rendered="true" id="__nuxt">
    <div id="__layout">
      <div class="container">
        <div class="card">
          <div class="card-body">
            <div role="alert" aria-live="polite" aria-atomic="true" align="center" class="alert alert-success"><h4>[nuxt-01] : routage et navigation</h4></div> <div>
              <div class="row">
                <div class="col-2">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a href="/nuxt-01/" target="_self" class="nav-link">
                        Home
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page1" target="_self" class="nav-link active nuxt-link-active">
                        Page 1
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-01/page2" target="_self" class="nav-link">
                        Page 2
                      </a>
                    </li>
                  </ul>
                </div> <div class="col-10">
                  <div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-primary">

                    Page 1
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>window.__NUXT__ = { layout: "default", data: [{}], error: null, serverRendered: true, logs: [{ date: new Date(1573917721122), args: ["[page1 beforeCreate]", "process.server=", "true", "process.client=", "false", "nombre d'arguments=", "0"], type: "log", level: 2, tag: "" }] };</script>
  <script src="/nuxt-01/_nuxt/runtime.js" defer></script>
  <script src="/nuxt-01/_nuxt/commons.app.js" defer></script>
  <script src="/nuxt-01/_nuxt/vendors.app.js" defer></script>
  <script src="/nuxt-01/_nuxt/app.js" defer></script>
</body>

We krijgen hetzelfde type pagina als de pagina [index], maar met de waarschuwing van de weergave [Page 1] (regel 30). Regels 41-44: de clientcode is samen met de pagina teruggestuurd. Uiteindelijk is het handmatig opvragen van een URL hetzelfde als het opnieuw opstarten van de applicatie. Alleen is de weergegeven pagina niet per se de startpagina, maar de pagina die is opgevraagd. Zodra de pagina is ontvangen, neemt de client het over. De server wordt niet meer benaderd, tenzij de gebruiker anders beslist.

https://stahe.github.io
Deze cursus-tutorial, geschreven door Serge Tahé, wordt aan het publiek ter beschikking gesteld volgens de voorwaarden van de Creative Commons-licentie Naamsvermelding – Geen commercieel gebruik – Gelijk delen 3.0 ongewijzigd.