Configuração

Por predefinição, a Nuxt está configurada para abranger a maioria dos casos de uso. Esta configuração predefinida pode ser sobrescrita pelo ficheiro nuxt.config.js.

A Propriedade css

A Nuxt permite-nos definir os ficheiros, módulos e bibliotecas que quisermos definir globalmente (incluídos em todas as páginas).

No nuxt.config.js, adicionamos os recursos de folha de estilo em cascata:

export default {
  css: [
    // Carregar um módulo de Node.js diretamente
    // (neste exemplo é um ficheiro de Sass)
    'bulma',
    // ficheiro de CSS no projeto
    '~/assets/css/main.css',
    // ficheiro de SCSS no projeto
    '~/assets/css/main.scss'
  ]
}

Extensões de Estilo

Podemos omitir a extensão do ficheiro para ficheiros CSS, SCSS, PostCSS, Less, Stylus e muitos mais listados no vetor css no nosso ficheiro de configuração da Nuxt:

export default {
  css: ['~/assets/css/main', '~/assets/css/animations']
}

Ordem predefinida: ['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less'].

Pré-processadores

Graças ao vue-loader , podemos usar qualquer tipo de pré-processador para o nosso <template> ou <style>: usamos o atributo lang.

Exemplo do nosso pages/index.vue usando Pug e Sass :

<template lang="pug">
  h1.red Hello {{ name }}!
</template>

<style lang="scss">
  .red {
    color: red;
  }
</style>

Para usar estes pré-processadores, precisamos os seus carregadores de Webpack:

yarn add --dev pug pug-plain-loader
yarn add --dev sass sass-loader@10

npm install --save-dev pug pug-plain-loader
npm install --save-dev sass sass-loader@10

Recursos Externos

Definições Globais

Podemos incluir os nossos recursos externos no objeto ou função head. Tal como descrita na documentação da interface de programação de aplicação da head , os exemplos seguintes mostram a utilização de head como um objeto e como uma função. Se quisermos usar valores do nosso componente .vue como propriedades computadas ou dados, podemos usar a função head, retornando o objeto head final. Também podemos passar para cada recurso uma body: true opcional para incluir o recurso antes do marcador de fechamento </body>.

Incluímos os nossos recursos em nuxt.config.js (neste caso, no objeto head):

export default {
  head: {
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
      }
    ]
  }
}

Definições Locais

Incluímos os nossos recursos no nosso ficheiro .vue dentro do diretório pages/ (neste caso, na função head):

<template>
  <h1>About page with jQuery and Roboto font</h1>
</template>

<script>
  export default {
    head() {
      return {
        script: [
          {
            src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
          }
        ],
        link: [
          {
            rel: 'stylesheet',
            href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
          }
        ]
      }
    }
  }
</script>

<style scoped>
  h1 {
    font-family: Roboto, sans-serif;
  }
</style>

Extensões de PostCSS

Se estiver presente, renomeamos ou eliminamos o postcss.config.js no nosso diretório de projeto. Depois, no nosso ficheiro nuxt.config.js, adicionamos o seguinte:

export default {
  build: {
    postcss: {
      // Adicionar os nomes de extensões como chaves e argumentos como valores.
      // Instalá-los antes como dependências com `npm` ou `yarn`.
      plugins: {
        // Desativar uma extensão passando `false` como valor.
        'postcss-url': false,
        'postcss-nested': {},
        'postcss-responsive-type': {},
        'postcss-hexrgba': {}
      },
      preset: {
        // Alterar as definições de `postcss-preset-env`
        autoprefixer: {
          grid: true
        }
      }
    }
  }
}

JSX

A Nuxt usa @nuxt/babel-preset-app , o qual se baseia no @vue/babel-preset-app oficial para a configuração predefinida da Babel, para podermos usar a JSX nos nossos componentes.

Também podemos usar JSX no método render dos nossos componentes:

export default {
  data () {
    return { name: 'World' }
  },
  render (h) {
    return <h1 class="red">{this.name}</h1>
  }
}

O ato de apelidar createElement como h é uma convenção comum que veremos no ecossistema da Vue, mas, na verdade, é opcional para a JSX, uma vez que esta injeta automaticamente const h = this.$createElement em qualquer método e recuperador (não funções ou funções de seta) declarados na sintaxe da ES2015 que tem extensão de sintaxe de JavaScript, então podemos deixar de lado o parâmetro (h).

Podemos saber mais sobre como utilizá-la na secção da extensão de sintaxe de JavaScript (JSX) da documentação da Vue.js.

Ignorar Ficheiros

.nuxtignore

Podemos utilizar um ficheiro .nuxtignore para permitir que a Nuxt ignore os ficheiros de layout, page, store e middleware no diretório raiz do nosso projeto (rootDir) durante a fase de construção. O ficheiro .nuxtignore está sujeito à mesma especificação que os ficheiros .gitignore e .eslintignore, em que cada linha é um padrão de globo indicando quais os ficheiros que devem ser ignorados.

# ignorar a disposição foo.vue

layouts/foo.vue

# ignorar os ficheiros de disposição cujo nome termina com -ignore.vue

layouts/*-ignore.vue

# ignorar a página bar.vue

pages/bar.vue

# ignorar a página dentro da pasta ignore

pages/ignore/*.vue

# ignorar o armazém de estado baz.js

store/baz.js

# ignorar os ficheiros de armazém de estado correspondentes a _.test._

store/ignore/_.test._

# ignorar os ficheiros de intermediários na pasta foo exceto foo/bar.js

middleware/foo/*.js !middleware/foo/bar.js

A Propriedade ignorePrefix

Qualquer ficheiro em pages/, layout/, middleware/ ou store/ será ignorado durante a construção se o seu nome de ficheiro começar com o prefixo especificado por ignorePrefix.

Por predefinição, todos os ficheiros que comecem por - serão ignorados, tais como store/-foo.js e pages/-bar.vue. Isto permite a colocação de testes, utilitários e componentes com os seus chamadores sem serem convertidos em rotas, armazéns de estado, etc.

A Propriedade ignore

Mais personalizável do que ignorePrefix: todos os ficheiros que correspondem a padrões de globo especificados dentro de ignore serão ignorados na construção:

export default {
  ignore: 'pages/bar.vue'
}

ignoreOptions

O nuxtignore utiliza node-ignore nos bastidores, a ignoreOptions pode ser configurada como options do node-ignore:

export default {
  ignoreOptions: {
    ignorecase: false
  }
}

Estender a Configuração da Webpack

Podemos estender a configuração da Webpack da Nuxt através da opção extend no nosso nuxt.config.js. A opção extend da propriedade build é um método que aceita dois argumentos. O primeiro argumento é o objeto config da Webpack exportado da configuração da Webpack da Nuxt. O segundo parâmetro é um objeto de contexto com as seguintes propriedades booleanas: { isDev, isClient, isServer, loaders }.

export default {
  build: {
    extend(config, { isDev, isClient }) {
      // ..
      config.module.rules.push({
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader: 'file-loader'
      })
      // Definir o modo da Webpack para desenvolvimento se `isDev` for verdadeiro
      if (isDev) {
        config.mode = 'development'
      }
    }
  }
}

O método extend é chamado duas vezes — uma para o pacote do cliente e outra para o pacote do servidor.

Personalizar a Configuração dos Pedaços

Podemos querer ajustar um pouco a configuração da otimização , evitando uma reescrita do objeto predefinido:

export default {
  build: {
    extend(config, { isClient }) {
      if (isClient) {
        config.optimization.splitChunks.maxSize = 200000
      }
    }
  }
}

Inspecionar a Configuração da Webpack

Para projetos complexos e depuração, às vezes é útil verificar como será a configuração final da Webpack. Felizmente, podemos executar o comando nuxt webpack de dentro do nosso projeto para gerar a configuração. Consultar este pedido de atualização de repositório #7029 para obter mais detalhes.

Adicionar Extensões de Webpack

No nosso ficheiro nuxt.config.js, sob a opção build, podemos passar a opção plugins da Webpack, da mesma maneira que o faríamos num ficheiro webpack.config.js .

Neste exemplo, adicionamos o método ProvidePlugin embutido da Webpack para carregar automaticamente módulos de JavaScript (lodash e jQuery) ao invés de ter que importá-los com import ou require em todos os lugares.

import webpack from 'webpack'

export default {
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        // módulos globais
        $: 'jquery',
        _: 'lodash'
      })
    ]
  }
}

Nota: podemos não precisar de jQuery numa aplicação baseada em Vue.

Com a Nuxt, também podemos controlar o contexto de execução das extensões: se estas devem ser executadas nas construções do client ou do server (ou diferenciar as construções de dev e prod) dentro da build.extend , onde também podemos passar manualmente as extensões da Webpack.

Estender a Webpack para Carregar Ficheiros de Áudio

Os ficheiros de áudio devem ser processados pelo file-loader. Este carregador já está incluído na configuração predefinida da Webpack, mas não está configurado para lidar com os ficheiros de áudio. Precisamos de estender a sua configuração predefinida no nuxt.config.js:

export default {
  build: {
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.(ogg|mp3|wav|mpe?g)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      })
    }
  }
}

Agora podemos importar os ficheiros de áudio desta maneira <audio :src="require('@/assets/water.mp3')" controls></audio>.

Se quisermos apenas escrever: <audio src="@/assets/water.mp3" controls></audio>, precisamos dizer ao vue-loader para requerer automaticamente os nossos ficheiros de áudio quando os referenciarmos com o atributo src:

export default {
  build: {
    loaders: {
      vue: {
        transformAssetUrls: {
          audio: 'src'
        }
      }
    },

    extend(config, ctx) {
      config.module.rules.push({
        test: /\.(ogg|mp3|wav|mpe?g)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      })
    }
  }
}

Editar o Hospedeiro e a Porta

Por predefinição, o hospedeiro do servidor de desenvolvimento da Nuxt é o localhost, o qual apenas pode ser acessado de dentro da máquina hospedeira. Para podermos ver a nossa aplicação noutro dispositivo temos de modificar o hospedeiro. Podemos modificar o nosso hospedeiro no nosso ficheiro nuxt.config.js.

O hospedeiro '0.0.0.0' é designado para dizer a Nuxt para resolver um endereço de hospedeiro, o qual é acessível a conexões fora da máquina hospedeira (por exemplo, rede local). Se ao hospedeiro for atribuído o valor de sequência de caracteres '0' (não 0, que é falso), ou '0.0.0.0' o nosso endereço de protocolo de internet local será atribuída à nossa aplicação da Nuxt:

export default {
  server: {
    host: '0' // predefinida como: localhost
  }
}

Também podemos alterar o número da porta a partir da porta predefinida de 3000:

export default {
  server: {
    port: 8000 // predefinida como: 3000
  }
}

Embora possamos modificar isto no ficheiro nuxt.config.js, não é aconselhável fazê-lo, porque pode causar-nos problemas ao hospedar o nosso sítio. É muito melhor modificar o hospedeiro e a porta diretamente no comando de execução do desenvolvimento:

HOST=0 PORT=8000 npm run dev

ou criar um programa no nosso package.json:

"scripts": {
  "dev:host": "nuxt --hostname '0' --port 8000"
}

Configuração Assíncrona

Embora seja melhor usar a configuração normal export default {}, podemos ter uma configuração assíncrona exportando uma função assíncrona que retorna o objeto de configuração:

import axios from 'axios'

export default async () => {
  const data = await axios.get('https://api.nuxtjs.dev/posts')
  return {
    head: {
      title: data.title
      //... o resto da configuração
    }
  }
}

Configurações Adicionais