3. Uma primeira aplicação [nuxt.js]

3.1. Criação da aplicação

Para os nossos desenvolvimentos [nuxt.js], continuamos a utilizar o VS Code. Criámos uma pasta [dvp] vazia, na qual iremos colocar os nossos exemplos. Em seguida, abrimos essa pasta:

Guardamos a área de trabalho com o nome [intro-nuxtjs] [3-5]:

Abrimos um terminal [6-7]:

Até agora, temos utilizado o gestor de pacotes JavaScript [npm]. Para variar, vamos utilizar aqui o gestor [yarn]. Este está instalado, tal como o [npm], com as versões recentes do [node.js]. Para criar uma primeira aplicação [nuxt], utilizamos o comando [yarn create nuxt-app <dossier>] [1]. O comando irá solicitar algumas informações sobre o projeto a gerar e, uma vez obtidas essas informações, irá gerá-lo [2]:

No [2], foi criada toda uma árvore de ficheiros. O ficheiro [package.json] apresenta a lista das bibliotecas JavaScript descarregadas para a pasta [node-modules] [4]:

{
  "name": "nuxt-intro",
  "version": "1.0.0",
  "description": "nuxt-intro",
  "author": "serge-tahe",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  "dependencies": {
    "nuxt": "^2.0.0",
    "bootstrap-vue": "^2.0.0",
    "bootstrap": "^4.1.3",
    "@nuxtjs/axios": "^5.3.6"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^1.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-prettier": "^3.0.1",
    "prettier": "^1.16.4"
  }
}

Este ficheiro reflete as respostas fornecidas ao comando [create nuxt-app] para definir o projeto criado (novembro de 2019). O leitor pode ter um ficheiro [package.json] diferente:

• pode ter dado respostas diferentes às perguntas;
• o comando [create nuxt-app] terá sofrido alterações desde a redação deste documento: as dependências e as versões terão mudado;

A linha 8 do script é o comando que inicia a aplicação:

• em [4], verifica-se que a aplicação está disponível em URL e [localhost:3000];
• em [5-6], verifica-se que a aplicação dá origem a um servidor [6] e a um cliente (desse servidor) [5];

Vamos aceder a URL [http://localhost:3000/] num navegador:

3.2. Descrição da estrutura de uma aplicação [nuxt]

Voltemos à estrutura da aplicação criada:

A função das pastas é a seguinte:

assets	recursos não compilados da aplicação (imagens, ...);
static	os ficheiros desta pasta estarão disponíveis na raiz da aplicação. Nesta pasta colocam-se os ficheiros que devem estar na raiz da aplicação, como, por exemplo, o ficheiro [robots.txt] destinado aos motores de busca;
components	os componentes [vue] da aplicação utilizados nos [layouts] e nos [pages];
layouts	os componentes [vue] da aplicação que servem de layout para os [pages];
páginas	os componentes [vue] apresentados pelas diferentes rotas da aplicação. Poderiam ser designados como as vistas da aplicação. As páginas desempenham um papel específico no [nuxt]: as rotas são criadas dinamicamente a partir da estrutura de pastas encontrada na pasta [pages];
middleware	os scripts executados a cada mudança de rota. Permitem controlar essas rotas;
plugins	tem um nome que pode causar confusão. Pode conter plugins, mas também scripts clássicos. Os scripts encontrados nesta pasta são executados no arranque da aplicação;
store	se contiver um script [index.js], este define uma instância do store de [Vuex];

Se uma pasta estiver vazia, pode ser eliminada da árvore de pastas. No exemplo acima, as pastas [assets, static, middleware, plugins, store] e [2] podem ser eliminadas.

3.3. O ficheiro de configuração [nuxt.config]

A execução da aplicação é controlada pelo seguinte ficheiro [nuxt.config.js]:

export default {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    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',
    // Documentação: 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) {}
  }
}

• linha 2: o tipo de aplicação gerada:
  • [universal]: aplicação cliente/servidor. No carregamento inicial da aplicação, bem como em cada atualização da página no navegador, o servidor é solicitado a fornecer a página;
  • [sap]: aplicação do tipo [Single Page Application]: um servidor fornece inicialmente a totalidade da aplicação. Posteriormente, o cliente opera de forma autónoma, mesmo em caso de atualização de uma página no navegador;
• linhas 6-18: definem o cabeçalho HTML <head> das diferentes páginas da aplicação:
  • linha 7: a baliza <title> do título das páginas;
  • linhas 8-16: as tags <meta>;
  • linha 17: as tags <link>

Na aplicação gerada, a baliza <head> é a seguinte (código-fonte da página apresentada no navegador):

<title>nuxt-intro</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="nuxt-intro">
<link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="preload" href="/_nuxt/runtime.js" as="script">
<link rel="preload" href="/_nuxt/commons.app.js" as="script">
<link rel="preload" href="/_nuxt/vendors.app.js" as="script">
<link rel="preload" href="/_nuxt/app.js" as="script">

Agora, vamos alterar o ficheiro [nuxt.config] da seguinte forma:

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' }]
},

Quando voltamos a executar a aplicação, a baliza <head> passou a ter o seguinte aspeto (código-fonte da página apresentada no navegador):

  <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">
    <link rel="preload" href="/_nuxt/runtime.js" as="script">
    <link rel="preload" href="/_nuxt/commons.app.js" as="script">
    <link rel="preload" href="/_nuxt/vendors.app.js" as="script">
<link rel="preload" href="/_nuxt/app.js" as="script">

Voltemos ao ficheiro [nuxt.config]:

export default {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: {
    ...
  },
  /*
   ** 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',
    // Documentação: 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) {}
  }
}

• linha 12: entre cada rota do cliente [nuxt], surge uma barra de carregamento (loading) se a mudança de rota demorar algum tempo. A propriedade [loading] permite configurar esta barra de carregamento, neste caso a cor da barra;
• linha 16: os ficheiros globais [css]. Serão automaticamente incluídos em todas as páginas da aplicação;
• linhas 24-27: os módulos JavaScript necessários para a compilação (build) da aplicação;
• linhas 31-36: os módulos JavaScript utilizados pela aplicação;
• linha 41: configuração da biblioteca [axios] quando esta tiver sido selecionada pelo utilizador para as caixas de diálogo HTTP com servidores de terceiros;
• linhas 45-50: configuração da compilação (build) do projeto;

É possível adicionar outras chaves ao ficheiro de configuração. Em particular, é possível definir a porta do serviço (3000 por predefinição) e a raiz do projeto (por predefinição, a pasta raiz do projeto). É isso que vamos fazer agora, adicionando as seguintes chaves:

// diretório do código-fonte
  srcDir: '.',
  router: {
    // URL raiz das páginas da aplicação
    base: '/nuxt-intro/'
  },
  // servidor
  server: {
    // porta do serviço - por predefinição 3000
    port: 81,
    // endereços de rede em escuta - por predefinição localhost=127.0.0.1
    host: '0.0.0.0'
  }

• linha 2: onde se encontra o código-fonte do projeto. Encontra-se aqui na pasta atual, ou seja, ao mesmo nível que o ficheiro [nuxt.config.js]. Este é o valor por predefinição;
• linhas 8-13: configuram o servidor (não se deve esquecer que uma aplicação [nuxt] do tipo [universal] está instalada tanto num servidor como num navegador cliente desse servidor);
• linha 10: as páginas da aplicação serão servidas na porta 81 do servidor;
• linha 12: por predefinição, [localhost] (endereço de rede 127.0.0.1). Um computador pode ter vários endereços de rede se pertencer a várias redes. O endereço 0.0.0.0 indica que o servidor web escuta todos os endereços de rede do computador;
• linhas 3-6: configuram o router da aplicação [nuxt];
• linha 5: as páginas da aplicação estarão disponíveis em URL e [http://localhost:81/nuxt-intro/];

Adicionemos estas linhas ao ficheiro [nuxt.config.js] e, em seguida, executemos o projeto (script npm dev). O resultado é o seguinte:

• em [1], o endereço do computador numa rede pública;
• em [2], a porta do serviço;
• em [3], a raiz da aplicação;

3.4. A pasta [layouts]

A pasta [layouts] destina-se aos componentes de layout. Por predefinição, é utilizado o componente denominado [default.vue]. Neste projeto, este é o seguinte:

<template>
  <div>
    <nuxt />
  </div>
</template>

<style>
html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}

.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green:hover {
  color: #fff;
  background-color: #3b8070;
}

.button--grey {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #35495e;
  color: #35495e;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.button--grey:hover {
  color: #fff;
  background-color: #35495e;
}
</style>

Comentários

• linhas 1-5: o [template] do componente;
• linha 3: a baliza <nuxt /> designa a página atual do encaminhamento;
• linhas 7-55: o estilo incorporado pelo componente de layout. Como este contém a página atual do roteamento, este estilo será aplicado a todas as páginas roteadas da aplicação;

Vemos que o objetivo principal da página [default.vue] é, neste caso, aplicar um estilo às páginas encaminhadas.

3.5. A pasta [pages]

A pasta [pages] contém as vistas encaminhadas, aquelas que o utilizador vê. A página [index.vue] é a página inicial da aplicação. No caso de [nuxt.js], não existe um ficheiro de encaminhamento. As rotas são determinadas a partir da estrutura da pasta [pages]. Neste caso, a presença de um ficheiro [index.vue] irá criar automaticamente uma rota denominada [index] e um caminho [/index], reduzido para [/], uma vez que se trata da página inicial. Assim, é criada a seguinte rota:

        { name : ‘index’, path : ‘/’}

O ficheiro [index.vue] é o seguinte:

<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        nuxt-intro
      </h1>
      <h2 class="subtitle">
        nuxt-intro
      </h2>
      <div class="links">
        <a href="https://nuxtjs.org/" target="_blank" class="button--green">
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
        >
          GitHub
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

O ficheiro [template], nas linhas 1 a 25, apresenta a seguinte visualização:

A imagem [1] é gerada pela linha 4 do [template]. Vemos, portanto, que a página utiliza um componente denominado [logo]. Este está definido nas linhas 27 a 35 do script da página. Na linha 28, a notação [~] designa a raiz do projeto.

3.6. O componente [Logo]

O componente [Logo.vue] é o seguinte:

<template>
  <div class="VueToNuxtLogo">
    <div class="Triangle Triangle--two" />
    <div class="Triangle Triangle--one" />
    <div class="Triangle Triangle--three" />
    <div class="Triangle Triangle--four" />
  </div>
</template>

<style>
.VueToNuxtLogo {
  display: inline-block;
  animation: turn 2s linear forwards 1s;
  transform: rotateX(180deg);
  position: relative;
  overflow: hidden;
  height: 180px;
  width: 245px;
}

.Triangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.Triangle--one {
  border-left: 105px solid transparent;
  border-right: 105px solid transparent;
  border-bottom: 180px solid #41b883;
}

.Triangle--two {
  top: 30px;
  left: 35px;
  animation: goright 0.5s linear forwards 3.5s;
  border-left: 87.5px solid transparent;
  border-right: 87.5px solid transparent;
  border-bottom: 150px solid #3b8070;
}

.Triangle--three {
  top: 60px;
  left: 35px;
  animation: goright 0.5s linear forwards 3.5s;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 120px solid #35495e;
}

.Triangle--four {
  top: 120px;
  left: 70px;
  animation: godown 0.5s linear forwards 3s;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 60px solid #fff;
}

@keyframes turn {
  100% {
    transform: rotateX(0deg);
  }
}

@keyframes godown {
  100% {
    top: 180px;
  }
}

@keyframes goright {
  100% {
    left: 70px;
  }
}
</style>

Este componente é constituído essencialmente por estilos e animações para criar uma imagem animada.

3.7. Vista DevTools

[Vue DevTools] é a extensão do navegador que permite inspecionar os objetos [nuxt.js] e [vue.js] no navegador. Já a utilizámos no capítulo sobre o [vue.js]. Vejamos o que esta ferramenta encontra quando a página inicial da nossa aplicação é apresentada:

• em [1], o componente [PagesIndex] remete para a página [pages/index.vue];
• vemos em [2] que este componente tem uma propriedade [$route], que é a rota que conduziu à página [index];

Como exercício simples, vamos apresentar esse caminho na consola.

3.8. Alteração da página inicial

Vamos modificar o ficheiro [index.vue]. Na nossa instalação do projeto, instalámos duas dependências:

• [eslint]: que verifica a sintaxe dos ficheiros JavaScript e dos componentes Vue. Se a extensão [ESLint] do VSCode tiver sido instalada, essa sintaxe é verificada à medida que o texto é digitado e os erros são imediatamente assinalados;
• [prettier]: que formata os códigos JavaScript de forma padronizada;

Estas dependências estão registadas no ficheiro [package.json]:

"devDependencies": {
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^1.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-prettier": "^3.0.1",
    "prettier": "^1.16.4"
}

Reparei (novembro de 2019) que, com a instalação efetuada através do comando [yarn create nuxt-app], as ferramentas [eslint, prettier] não funcionam durante a digitação dos textos. Os erros só são assinalados na compilação. Após algumas pesquisas, encontrei uma configuração que funciona:

Instala-se, na raiz do projeto, uma pasta [.vscode] contendo o seguinte ficheiro [settings.json]:

{
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": false
}

• linhas 2-11: indicam que, quando o [eslint] valida os ficheiros .vue e .js, deve corrigir os erros que for possível corrigir;
• linha 12: quando um ficheiro é guardado, o [eslint] deve corrigir os erros que for possível corrigir;
• linha 13: desativa a formatação efetuada por predefinição no VSCode durante um salvamento. Será o [prettier] que o fará;

Com esta configuração:

• os erros de sintaxe ou de formatação são assinalados logo que o texto é digitado;
• os erros de formatação são corrigidos automaticamente ao guardar o ficheiro;

A biblioteca [prettier] é configurada pelo ficheiro [.prettierrc]:

Por predefinição, este ficheiro é o seguinte:

{
  "semi": false,
  "arrowParens": "always",
  "singleQuote": true
}

• linha 1: sem «;» no final das instruções;
• linha 2: se uma função «seta» (arrow) tiver um único parâmetro, este deve estar entre parênteses;
• linha 3: as cadeias de caracteres são colocadas entre apóstrofos (sem aspas);

Adicionamos as duas regras seguintes:

{
  "semi": false,
  "arrowParens": "always",
  "singleQuote": true,
  "printWidth": 120,
  "endOfLine": "auto"
}

• linha 5: a linha de código pode ter até 120 caracteres;
• linha 6: o marcador de fim de linha pode ser tanto CRLF (Windows) como LF (Unix);

Por fim, o ficheiro [package.json] é alterado da seguinte forma:

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
},

• linha 7: adicionamos o comando [lintfix], que é idêntico ao comando [lint] da linha 6, com a diferença de que inclui adicionalmente o parâmetro [--fix]. O comando [lint] verifica a sintaxe e o formato de todos os ficheiros do projeto e assinala qualquer erro. O comando [lintfix] fará o mesmo, com a diferença de que os problemas de formatação que possam ser corrigidos serão corrigidos automaticamente. O comando [lintfix] deve ser utilizado se a compilação falhar devido a problemas de formatação dos ficheiros;

Feito isto, alteramos o ficheiro [index.vue] da seguinte forma:

<script>
/* eslint-disable no-console */
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  },
  // ciclo de vida
  created() {
    console.log('created, route=', this.$route)
  }
}
</script>

• linhas 10-12: adicionamos a função [created], que é executada automaticamente quando o componente é criado;
• linha 11: exibe-se a rota atual;
• linha 2: um comentário destinado à função [eslint]. Sem este comentário, a função [eslint] sinaliza um erro linha 11: não são permitidas instruções [console] nas funções do ciclo de vida. O [eslint] é configurável. Vamos manter a sua configuração por predefinição e utilizaremos comentários como o da linha 2 para desativar uma regra específica do [eslint]. Utilizaremos dois tipos de comentários:

• /* desativação da regra [eslint] */: desativação de uma regra para todo o ficheiro;
• // desativação da regra [eslint]: desativação de uma regra para a linha seguinte;

Durante a digitação, os erros são assinalados e está disponível uma função [Quick Fix]:

Executa-se o projeto:

• em [1], o separador [Vue] das ferramentas de desenvolvimento do navegador (F12);
• em [2] e [3], a visualização do percurso;

Por que razão há duas visualizações e não apenas uma?

Uma aplicação [nuxt] é composta por dois elementos, um servidor e um cliente:

1. o servidor fornece as páginas da aplicação no seu arranque e, posteriormente, sempre que uma página é atualizada no navegador (F5) ou quando o utilizador introduz manualmente um URL da aplicação;
2. cada página fornecida pelo navegador contém a página solicitada, bem como o código JavaScript de toda a aplicação, que é posteriormente executado no navegador. Este é o cliente. Enquanto não houver atualização da página no navegador, a aplicação funciona como uma aplicação Vue clássica no modo [sap] (Aplicação de Página Única). Assim que o utilizador provocar manualmente uma atualização da página, esta é solicitada ao servidor e regressa-se à fase 1 anterior.

O que é preciso compreender é que são as mesmas páginas do dossier [pages] que são fornecidas pelo servidor ou pelo cliente. Por esta razão, os criadores do [nuxt] designam este tipo de páginas como páginas isomórficas. As mesmas páginas [.vue] podem ser interpretadas tanto pelo cliente como pelo servidor. Tomemos como exemplo a página [index]:

<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        nuxt-intro
      </h1>
      <h2 class="subtitle">
        nuxt-intro
      </h2>
      <div class="links">
        <a href="https://nuxtjs.org/" target="_blank" class="button--green">
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
        >
          GitHub
        </a>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable no-console */
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  },
  // ciclo de vida
  created() {
    console.log('created, route=', this.$route)
  }
}
</script>

Como se trata da página inicial, no arranque da aplicação esta é servida pelo servidor. A página no servidor também tem um ciclo de vida, idêntico ao de uma página [Vue] clássica, exceto no que diz respeito às funções [beforeMount, monted], que não existem no lado do servidor. A função [created] é executada, o que explica o primeiro registo. Isto significa, de passagem, que o servidor é capaz de executar scripts JavaScript. Neste caso e, em geral, este servidor é um servidor [node.js]. Depois de criada no servidor, a página chega ao navegador, onde passa novamente pelo ciclo de vida. A função [created] é executada uma segunda vez, o que dá origem ao segundo registo.

A arquitetura de uma aplicação [nuxt] poderia ser a seguinte:

• [1]: o navegador que hospeda a aplicação [nuxt] quando esta foi carregada no navegador. É o que designamos por cliente [nuxt];
• [3]: o servidor que hospeda inicialmente a aplicação [nuxt]. Esta é carregada no navegador [1] no arranque da aplicação e sempre que o utilizador atualiza a página atual do navegador ou introduz manualmente um URL da aplicação. É aqui que reside a diferença de funcionamento em relação a uma aplicação Vue clássica. Nesta última, uma vez carregada no navegador, o servidor já não era mais consultado. Outra diferença importante que ainda não conseguimos observar é que o servidor de uma aplicação Vue é um servidor estático, incapaz de interpretar as páginas [.vue], enquanto o de uma aplicação Nuxt do tipo [universal] é um servidor JavaScript. Antes de enviar uma página para o navegador, o servidor pode executar scripts e, por exemplo, ir buscar dados no servidor [2];
• [2]: é o servidor que fornece dados quer ao cliente [nuxt] [1], quer ao servidor [nuxt] [3];

No esquema acima, é possível distinguir três subsistemas cliente/servidor:

• [1, 3]: aloja a aplicação [nuxt]. O [3] fornece-a no arranque da aplicação, juntamente com a página inicial, e sempre que o utilizador solicita uma página manualmente. O [1] hospeda aaplicação [nuxt] recebida de [3], que funciona então no modo [SAP] enquanto as páginas não forem solicitadas manualmente a [3];
• [1, 2]: no modo [SAP], o cliente [nuxt] recupera dados externos de um ou mais servidores;
• [3, 2]: durante a geração da página solicitada pelo utilizador, o servidor [3] também pode recuperar dados externos de um ou mais servidores;

É, portanto, o servidor [3] que distingue uma aplicação [nuxt] de uma aplicação [vue]. Este servidor é acionado sempre que o utilizador solicita uma página manualmente. Este servidor processa as mesmas páginas [.vue] que os clientes [vue] e [1]. Trata-se de um servidor JavaScript capaz de executar os scripts presentes na página. Isto pode, por exemplo, alterar a forma como a página inicial é gerada com dados externos: enquanto que uma aplicação [vue] obtém esses dados necessariamente a partir do cliente [1], aqui podem ser obtidos pelo servidor [3] antes de a página ser enviada ao cliente. A página inicial torna-se assim significativa e pode contribuir para melhorar o SEO da aplicação.

Nota: no modo de desenvolvimento, as três entidades [1, 2, 3] encontram-se frequentemente na mesma máquina. Será esse o caso aqui em todos os nossos exemplos.

3.9. Mudança do código-fonte da aplicação para uma pasta separada

Posteriormente, iremos criar várias aplicações [nuxt] na mesma pasta [dvp]. Com efeito, a pasta de dependências [node_modules] gerada para cada projeto [nuxt] pode atingir várias centenas de megabytes. Vamos criar várias pastas [nuxt-00, nuxt-01, ...] na pasta [dvp] para conter o código-fonte dos exemplos a testar. Em seguida, utilizaremos o ficheiro de configuração [nuxt-config.js] para indicar onde se encontra o código-fonte do projeto [dvp], que continuará a ser o único projeto [nuxt] deste tutorial.

Vamos mover o código-fonte da aplicação gerada inicialmente pelo comando [yarn create nuxt-app] para uma pasta [nuxt-00]:

• em [2], movemos as pastas [components, layouts, pages] para uma pasta [nuxt-00];
• no [3], temos de alterar o ficheiro [nuxt.config.js];

Alteramos o ficheiro [nuxt.config.js] da seguinte forma:

export default {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  ...
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  },
  // diretório do código-fonte
  srcDir: 'nuxt-00',
  // router
  router: {
    // raiz dos URL da aplicação
    base: '/nuxt-00/'
  },
  // servidor
  server: {
    // porta de serviço, 3000 por predefinição
    port: 81,
    // endereços de rede em escuta, por predefinição localhost: 127.0.0.1
    // 0.0.0.0 = todos os endereços de rede do computador
    host: '0.0.0.0'
  }
}

O ficheiro é alterado em dois pontos:

• linha 17: indica-se que o código-fonte do projeto [dvp] se encontra na pasta [nuxt-00];
• linha 21: indica-se que a raiz da aplicação URL passa a ser [/nuxt-00/]. Esta alteração não era obrigatória. Poderíamos não definir esta propriedade e, nesse caso, a raiz do URL seria [/]. Aqui, isto permitir-nos-á lembrar que o código-fonte executado é o da pasta [nuxt-00];

Feito isto, o projeto [dvp] é executado tal como anteriormente:

3.10. Implantação da aplicação [nuxt-00]

Vamos executar a aplicação [nuxt-00] num ambiente diferente do ambiente integrado da VSCode.

Primeiro, compilamos a aplicação:

• em [3], o resultado da compilação do cliente. Será executado pelo navegador;
• em [4], o resultado da compilação do servidor. Será executado pelo servidor [node.js];

O resultado da compilação é colocado na pasta [.nuxt]:

Copiamos as pastas [.nuxt, node_modules] e os ficheiros [package.json, nuxt.config.js] para uma pasta separada:

O ficheiro [package.json] é simplificado da seguinte forma:

{
  "scripts": {
    "start": "nuxt start"
  }
}

• mantém-se apenas o script [start], que permite executar a versão compilada do projeto;

O ficheiro [nuxt.config.js] é simplificado da seguinte forma:

export default {
  // router
  router: {
    // raiz dos URL da aplicação
    base: '/nuxt-00/'
  },
  // servidor
  server: {
    // porta de serviço, 3000 por predefinição
    port: 81,
    // endereços de rede em escuta, por predefinição localhost: 127.0.0.1
    // 0.0.0.0 = todos os endereços de rede do computador
    host: '0.0.0.0'
  }
}

• linha 5: define-se o URL de base da aplicação compilada;
• linhas 8-14: define-se a porta de serviço e os endereços de rede a monitorizar;

Feito isto, abre-se um terminal Laragon e navega-se até à pasta que contém a versão compilada do projeto. É possível abrir qualquer tipo de terminal, mas o executável [npm] tem de estar no diretório do terminal. É o caso do terminal Laragon.

Feito isto, digite o comando [npm run start]:

Em [3], vemos que foi iniciado um servidor e que este está a escutar no URL [http://192.168.1.128:81/nuxt-00/]. Agora, vamos aceder a este endereço URL com um navegador [4]. Temos exatamente o mesmo resultado que anteriormente. No terminal, foram gravados registos [5]. Trata-se do registo inserido no método [created] da página [index.vue], que foi executado pelo servidor [node.js].

No lado do navegador [6], encontra-se também o registo do método [created] da página [index.vue], mas desta vez executado pelo cliente.

3.11. Implementação de um servidor seguro

Acima, o URL da aplicação é [http://192.168.1.128/nuxt-00/]. Gostaríamos que fosse [https://192.168.1.128/nuxt-00/]. Por isso, temos de criar um servidor seguro. Mostramos como proceder.

Nota: o método foi retirado do artigo [https://stackoverflow.com/questions/56966137/how-to-run-nuxt-npm-run-dev-with-https-in-localhost].

Em primeiro lugar, criamos uma chave privada e uma chave pública com o comando [openssl]. O [openssl] é normalmente instalado em simultâneo com o servidor Laragon. Por isso, este comando está disponível em qualquer terminal Laragon. Abramos, portanto, um terminal Laragon e acedamos à pasta da aplicação implementada:

• no [2], digitamos o comando [openssl genrsa 2048 > server.key];
• em [3], é criado um ficheiro [server.key];
• em [4], introduz-se o comando [openssl req -new -x509 -nodes -sha256 -days 365 -key server.key -out server.crt];
• no [5], é criado um ficheiro [server.crt];

Estes dois ficheiros constituem um certificado autoassinado. A maioria dos navegadores só os aceita após aprovação do utilizador que solicitou a página.

Os ficheiros [server.key, server.crt] devem agora ser utilizados pela aplicação web. Para tal, o ficheiro [nuxt.config.js] deve ser alterado da seguinte forma:

import path from 'path'
import fs from 'fs'

export default {
  // router
  router: {
    // raiz dos URL da aplicação
    base: '/nuxt-00/'
  },
  // servidor
  server: {
    // porta de serviço, 3000 por predefinição
    port: 81,
    // endereços de rede em escuta, por predefinição localhost: 127.0.0.1
    // 0.0.0.0 = todos os endereços de rede do computador
    host: '0.0.0.0',
    // certificado autoassinado
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
      cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
    }
  }
}

São as linhas 18 a 21 que implementam o protocolo [https].

Agora, vamos executar novamente a aplicação:

3.12. Fim do primeiro exemplo

O primeiro exemplo está agora concluído. Ensinou-nos muitos conceitos do [nuxt]. Vamos agora desenvolver outros exemplos que iremos colocar em pastas [nuxt-01, nuxt-02, ...]. Como estes exemplos irão utilizar um ficheiro [nuxt.config.js] diferente, iremos guardar em cada uma destas pastas o ficheiro [nuxt.config.js] que serviu para os executar: