Skip to content

4. Przykład [nuxt-01]: wyznaczanie trasy i nawigacja

Stworzymy serię prostych przykładów, aby stopniowo poznać działanie aplikacji [nuxt]. Zaczniemy od przeniesienia aplikacji [vuejs-11] z dokumentu |Introduction au framework VUE.JS par l’exemple|, aby najpierw dowiedzieć się, czym różni się organizacja kodu aplikacji [nuxt] od organizacji kodu aplikacji [vue].

4.1. Struktura drzewa projektu

Projekt [vuejs-11] był projektem dotyczącym nawigacji między widokami:

Image

Struktura kodu źródłowego projektu [vuejs-11] wyglądała następująco:

Image

  • [main.js] był skryptem uruchamianym podczas startu aplikacji [vue];
  • [router.js] określał reguły routingu;
  • [App.vue] stanowił widok strukturalny aplikacji. Organizował on układ różnych widoków;
  • [Component1, Component2, Component3, Layout, Navigation] to komponenty wykorzystywane w poszczególnych widokach aplikacji;

Podczas przenoszenia aplikacji [vue] [1] do aplikacji [nuxt] [2]:

  • skrypty uruchamiane podczas startu aplikacji muszą być zadeklarowane w kluczu [plugins] pliku [nuxt.config.js]. Ponadto możliwe jest oddzielenie skryptów przeznaczonych dla serwera [nuxt] od tych przeznaczonych dla klienta [nuxt];
  • widok [App.vue] należy zainstalować w folderze [layouts] i zmienić jego nazwę na [default.vue];
  • komponenty [Component1, Component2, Component3], które są celami routingu, należy przenieść do folderu [pages]. Jeden z nich, pełniący funkcję strony głównej, należy przemianować na [index.vue]. W tym przypadku zmieniliśmy nazwy następujących plików:
    • [Component1] --> [index]: wyświetla tekst [Home];
    • [Component2] --> [page1]: wyświetla tekst [Page 1];
    • [Component3] --> [page2]: wyświetla tekst [Page 2];

[nuxt] wykorzystuje zawartość folderu [pages] do dynamicznego generowania następujących tras:

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

W związku z tym plik [router.js] używany w projekcie [vue] staje się zbędny w projekcie [nuxt].

Plik konfiguracyjny [nuxt.config.js] będzie wyglądał następująco:


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: [
    // Dokumentacja: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Dokumentacja: https://bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
    // Dokumentacja: 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) {}
  },
  // katalog kodu źródłowego
  srcDir: 'nuxt-01',
  // router
  router: {
    // katalog główny aplikacji URL
    base: '/nuxt-01/'
  },
  // serwer
  server: {
    // port usługi, domyślnie 3000
    port: 81,
    // adresy sieciowe, na których nasłuchuje, domyślnie localhost: 127.0.0.1
    // 0.0.0.0 = wszystkie adresy sieciowe komputera
    host: '0.0.0.0'
  }
}
  • wiersz 62: należy wskazać folder zawierający kod źródłowy projektu [dvp];
  • wiersz 66: podaje się katalog główny aplikacji [dvp] (można wpisać dowolną wartość);
  • wiersz 43: należy zauważyć, że biblioteka [bootstrap-vue] jest odwołana w konfiguracji;

4.2. Przeniesienie pliku [main.js]

Plik [main.js] z projektu [vuejs-11] miał następującą treść:


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

// wtyczki
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'

// konfiguracja
Vue.config.productionTip = false

// instancjonowanie projektu [App]
new Vue({
  name: "app",
  // widok główny
  render: h => h(App),
  // router
  router: monRouteur,
}).$mount('#aplikacja')

Poza plikiem [imports] kod wykonuje następujące czynności:

  • wiersze 5–11: wykorzystanie biblioteki [bootstrap-vue]. Zadanie to jest obecnie realizowane przez moduł [bootstrap-vue/nuxt] z wiersza 43 pliku konfiguracyjnego [nuxt.config.js];
  • wiersze 14 i 25: wykorzystanie pliku routingu [router.js]. Zadanie to jest obecnie wykonywane automatycznie przez aplikację [nuxt] na podstawie struktury katalogów zawartej w folderze [pages];
  • wiersze 20–26: instancjonowanie głównego widoku aplikacji. W aplikacji [nuxt] jako główny widok służy widok [layouts/default.vue];

Plik [main.js] nie ma już racji bytu. Gdyby tak było, zadeklarowano by go w kluczu [plugins] w wierszu 30 pliku konfiguracyjnego [nuxt.config.js];

4.3. Widok główny [default.vue]

Image

Główny widok [layouts / default.vue] wygląda następująco:


<template>
  <div class="container">
    <b-card>
      <!-- komunikat -->
      <b-alert show variant="success" align="center">
        <h4>[nuxt-01] : routage et navigation</h4>
      </b-alert>
      <!-- bieżący widok routingu -->
      <nuxt />
    </b-card>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
  • W wierszu 9 projektu [vuejs-11] znajdował się tag <router-view /> zamiast używanego tutaj tagu <nuxt />. Oba wydają się działać. Wypróbowałem oba i nie zauważyłem żadnych zmian. Zostawiłem tag <nuxt />, który jest zalecany. Wyświetla on bieżący widok, czyli stronę docelową bieżącego routingu;

4.4. Komponenty

Image

W porównaniu z projektem [vuejs-11] komponenty [layout, navigation] pozostają bez zmian:

[components / layout.vue]


<!-- układ widoków -->
<template>
  <!-- wiersz -->
  <div>
    <b-row>
      <!-- obszar z dwiema kolumnami -->
      <b-col v-if="left" cols="2">
        <slot name="left" />
      </b-col>
      <!-- obszar z dziesięcioma kolumnami -->
      <b-col v-if="right" cols="10">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>

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

Ten komponent służy do podziału stron aplikacji na dwie kolumny:

  • wiersze 7–9: lewa kolumna o szerokości 2 kolumn Bootstrap;
  • wiersze 11–13: prawa kolumna o szerokości 10 kolumn Bootstrap;

[navigation.vue]


<template>
  <!-- menu Bootstrap z trzema opcjami -->
  <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>

Ten komponent wyświetla trzy linki nawigacyjne:

Image

Aby dowiedzieć się, jakie wartości należy przypisać do atrybutów [to] w wierszach 4, 7 i 10, należy zajrzeć do folderu [pages] [2]:

  • strona [index] będzie miała strony URL i [/];
  • strona [page1] będzie miała strony URL i [/page1];
  • strona [page2] będzie miała strony URL i [/page2];

Komponent [navigation] można również zapisać w następujący sposób:


<template>
  <!-- menu Bootstrap z trzema opcjami -->
  <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>

Tag <b-nav-item> został zastąpiony tagiem <nuxt-link>, który oznacza link routingu. Podczas działania nie zauważyłem żadnej znaczącej różnicy, która mogłaby skłonić mnie do wyboru jednego tagu zamiast drugiego.

4.5. Strony

Image

Strona [index.vue] wyświetla następujący widok:

Image

Kod strony wygląda następująco:


<!-- strona główna -->
<template>
  <Layout :left="true" :right="true">
    <!-- nawigacja -->
    <Navigation slot="left" />
    <!-- komunikat-->
    <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',
  // używane komponenty
  components: {
    Layout,
    Navigation
  },
  // cykl życia
  beforeCreate(...args) {
    console.log('[home beforeCreate]', 'process.server=', process.server,
'process.client=', process.client, „liczba argumentów=”, args.length)
  },
  created(...args) {
    console.log('[home created]', 'process.server=', process.server,
'process.client=', process.client, „liczba argumentów=”, args.length)
  },
  beforeMount(...args) {
    console.log('[home beforeMount]', 'process.server=', process.server,
'process.client=', process.client, „liczba argumentów=”, args.length)
  },
  mounted(...args) {
    console.log('[home mounted]', 'process.server=', process.server,
'process.client=', process.client, „liczba argumentów=”, args.length)
  }
}
</script>
  • wiersz 5: komponent nawigacyjny umieszczono w lewej kolumnie;
  • wiersze 7–9: w prawej kolumnie umieszczono alert;

W sekcji <script> umieszczamy kod w funkcjach cyklu życia strony [beforeCreate, created, beforeMount, beforeMounted]. Chcemy wiedzieć, które z nich są wykonywane przez serwer []nuxt, a które przez klienta [nuxt]. Przypomnijmy dwie rzeczy:

  • gdy strona jest wywoływana albo przy uruchomieniu aplikacji, jak w przypadku strony [index], albo ręcznie przez użytkownika, który odświeża stronę w przeglądarce lub wpisuje adres URL, jest ona najpierw dostarczana przez serwer [nuxt]. Serwer ten interpretuje powyższy kod i wykonuje zawarty w nim kod JavaScript;
  • gdy strona wysłana przez serwer [nuxt] dociera do przeglądarki, zawiera ona kod klienta [nuxt]. Ten z kolei ponownie interpretuje powyższą stronę;
  • na podstawie logów chcemy dowiedzieć się, kto co robi, aby lepiej zrozumieć ten proces;
  • wiersze 30–31: w funkcji wykorzystuje się obiekt globalny [process], który istnieje zarówno na serwerze, jak i na kliencie:
    • [process.server] ma wartość true, jeśli kod jest wykonywany przez serwer, w przeciwnym razie ma wartość false;
    • [process.client] ma wartość true, jeśli kod jest wykonywany przez klienta, w przeciwnym razie ma wartość false;
    • ponieważ zmienna [process] nie jest zadeklarowana w kodzie, konieczne jest dodanie wiersza 14 dla [eslint]. Wiersz [16] jest niezbędny, ponieważ w przeciwnym razie [eslint] zgłasza inny rodzaj błędu z powodu zmiennej [process]. Czy wiersz 15 jest konieczny, aby umożliwić wykorzystanie [console] w funkcjach cyklu życia?
  • wiersz 29: chcemy również sprawdzić, czy funkcje cyklu życia przyjmują argumenty. Okazuje się bowiem, że [nuxt] przekazuje informacje do niektórych funkcji. Chcemy sprawdzić, czy funkcje cyklu życia są wśród nich;
  • powtarzamy ten sam kod dla wszystkich czterech funkcji;

4.6. Plik [nuxt.config.js]

To właśnie on kontroluje wykonanie projektu [dvp]. Został on opisany na stronie 33.

4.7. Realizacja projektu

Uruchamiamy projekt:

Image

Wyświetla się następująca strona:

Image

Po zainstalowaniu w przeglądarce aplikacja [nuxt] staje się standardową aplikacją [vue]. Nie będziemy zatem omawiać działania aplikacji [nuxt-01] po stronie klienta. Zostało to już omówione w projekcie [vuejs-11] w dokumencie |Introduction au framework VUE.JS par l’exemple|.

Aplikacja [nuxt] różni się od aplikacji [vue] jedynie w dwóch momentach:

  • pierwszego uruchomienia aplikacji, które wyświetla stronę główną;
  • za każdym razem, gdy użytkownik w jakikolwiek sposób powoduje odświeżenie przeglądarki;

W obu tych przypadkach:

  • żądana strona jest dostarczana przez serwer;
  • otrzymana strona jest przetwarzana przez klienta;

Przyjrzyjmy się logom uruchomienia aplikacji (F12 w przeglądarce):

Image

  • w [1] – logi serwera (process.server=true). Pojawiają się one poprzedzone adnotacją [Nuxt SSR] (SSR= Server Side Rendered);
  • w [2] – logi klienta w przeglądarce (process.client=true);

Na podstawie tych logów można wywnioskować, że:

  • serwer wykonuje funkcje [beforeCreate, created] cyklu życia;
  • klient wykonuje funkcje cyklu życia o identyfikatorze [beforeCreate, created, beforeMount, mounted];
  • serwer przetworzył stronę przed klientem;
  • w obu przypadkach żadna z wykonywanych funkcji nie otrzymuje argumentów;

Przyjrzyjmy się teraz kodowi źródłowemu otrzymanej strony (opcja [Code source de la page] w przeglądarce):


<!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>

Komentarze

  • Pierwszą rzeczą, którą można zauważyć, jest to, że otrzymany kod HTML prawidłowo odzwierciedla to, co widzi użytkownik. Nie miało to miejsca w przypadku aplikacji [vue], dla których wyświetlany kod źródłowy był kodem źródłowym niemal pustego pliku HTML. To właśnie otrzymała przeglądarka. Następnie klient [vue] przejmował kontrolę i budował stronę oczekiwaną przez użytkownika. Należało wówczas przejść do zakładki [inspecteur] w narzędziach programistycznych przeglądarki (F12), aby odkryć kod HTML wyświetlanej strony;
  • wiersze 57–67: to skrypt, który wyświetlił logi oznaczone tagiem [Nuxt SSR]. Logi te zostały wygenerowane po stronie serwera, a wyniki zostały osadzone w skrypcie dołączonym do wysłanej strony;
  • wiersze 68–71: skrypty tworzące klienta uruchamianego po stronie przeglądarki;

Skrypty z wierszy 68–71 są wykonywane i przekształcają otrzymaną stronę. Aby sprawdzić, jaka strona została ostatecznie wyświetlona użytkownikowi, należy przejść do zakładki [inspecteur] w narzędziach programistycznych przeglądarki (F12):

Image

Po rozwinięciu tagu <html> [3] widoczna jest następująca treść:


<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>

Komentarze

  • na pierwszy rzut oka strona wyświetlana w wierszach 19–59 wydaje się być taka sama jak strona otrzymana;
  • wiersze 14–16: pojawiają się trzy nowe skrypty, po jednym dla każdej ze stron aplikacji;
  • wiersze 76–79: pojawiają się cztery ciągi znaków [iframe];

W wierszach 33, 37 i 42 pojawiają się problematyczne linki. Wyglądają one na zwykłe linki, które po kliknięciu powinny wysłać żądanie do serwera. Jednak podczas wykonywania kodu widać, że tak nie jest: nie ma żadnego żądania wysyłanego do serwera. Aby zrozumieć dlaczego, należy powrócić do zakładki [inspecteur] w przeglądarce:

Image

Widać, że w [1, 2] do linków zostały przypisane zdarzenia. To skrypty z wierszy 71–74 przypisały do linków procedury obsługi zdarzeń. A zatem:

  • strona wyświetlana przez klienta jest wizualnie identyczna z tą wysłaną przez serwer;
  • klient dodał do strony dynamiczne zachowanie;

Teraz wywołajmy stronę [page1], wpisując ręcznie adres URL zamiast [http://192.168.1.128:81/nuxt-01/page1]. Logi będą wyglądały następująco:

Image

Otrzymujemy te same wyniki, co w przypadku strony [index], ale dla strony [page1]. Kod źródłowy otrzymanej strony wygląda następująco:


<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>

Otrzymujemy ten sam typ strony co w przypadku strony [index], ale z komunikatem ostrzegawczym z widoku [Page 1] (wiersz 30). W wierszach 41–44 kod klienta został zwrócony wraz ze stroną. Ostatecznie ręczne wywołanie strony URL jest równoznaczne z ponownym uruchomieniem aplikacji. Wyświetlana strona niekoniecznie jest jednak stroną główną – jest to strona, o którą poproszono. Po otrzymaniu strony kontrolę przejmuje klient. Serwer nie będzie już angażowany, chyba że użytkownik zdecyduje inaczej.

https://stahe.github.io
Ten kurs-samouczek, napisany przez Serge'a Tahé, jest udostępniany publicznie na warunkach licencji Creative Commons Uznanie autorstwa – Bez wykorzystania komercyjnego – Na tych samych warunkach 3.0 bez zmian.