O ficheiro de configuração do Nuxt

Por padrão, o Nuxt está configurado para cobrir a maior parte dos casos de uso. Esta configuração pode ser sobrescrita com o ficheiro nuxt.config.js.

nuxt.config.js

A propriedade alias

Esta opção permite você definir apelidos que estarão disponíveis dentro do seu JavaScript e CSS.

import { resolve } from 'path'

export default {
  alias: {
    'style': resolve(__dirname, './assets/style')
  }
}

A propriedade build

Esta opção permite você configurar várias definições para o passo build, incluindo loaders, filenames, a configuração do webpack e transpilation.

export default {
  build: {
    /*
     ** Você pode estender a configuração do webpack aqui
     */
    extend(config, ctx) {}
  }
}

A propriedade css

Esta opção permite você definir os ficheiros CSS, módulos e bibliotecas que você quiser incluir globalmente (em todas páginas).

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

Você pode omitir a extensão para CSS, SCSS, PostCSS, LESS, Stylus, ... ficheiros listados dentro o array css dentro do seu ficheiro de configuração do nuxt.

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

Ao omitir a extensão, se você tiver um ficheiro css e decidir mudar para usar sass por exemplo, você não terá de atualizar o seu nuxt.config.js assim ele usará a nova extensão uma vez que nome do ficheiro permanece o mesmo.

A propriedade dev

Esta opção permite você definir o modo de development (desenvolvimento) ou production (produção) do Nuxt (importante para quando você usar o Nuxt programaticamente).

export default {
  dev: process.env.NODE_ENV !== 'production'
}

A propriedade env

Esta opção permite você definir variáveis de ambientes que são requeridas no momento da construção (ao invés do momento de execução) tais como NODE_ENV=staging ou VERSION=1.2.3. Contudo, para as variáveis do tempo de execução o runtimeConfig é requerido.

export default {
  env: {
    baseURL: process.env.BASE_URL
  }
}

A propriedade runtimeConfig

A configuração do tempo de execução tem suporte embutido ao dotenv para uma segurança melhor e rápido desenvolvimento. A configuração do tempo de execução é adicionada ao payload do Nuxt assim não há necessidade de reconstruir no sentido de atualizar a configuração do tempo de execução quando estiver trabalhando em desenvolvimento ou com a renderização no lado do servidor ou com apenas aplicações no lado do cliente. (Para sites estáticos você continuará a precisar regerar o seu site para ver as mudanças).

Suporte ao ponto env

Se você tiver um ficheiro .env dentro do diretório raiz do seu projeto, ele será automaticamente carregado dentro do process.env e acessível dentro do seu nuxt.config/serverMiddleware e quaisquer outros ficheiros que eles importar.

Você pode personalizar o caminho ao usar --dotenv <file> ou desativar completamente com --dotenv false. Por exemplo, você pode especificar um ficheiro diferente .env em ambientes de produção, montagem ou desenvolvimento.

A propriedade publicRuntimeConfig

• deve carregar todas variáveis de ambientes que são publicas assim esses serão expostas no frontend. Isto pode incluir uma referência para sua URL pública por exemplo.
• está disponível ao usar $config dentro de ambos servidor e cliente.

export default {
  publicRuntimeConfig: {
    baseURL: process.env.BASE_URL || 'https://v2.nuxt.com'
  }
}

A propriedade privateRuntimeConfig

• deve carregar todas variáveis de ambiente que são privadas e que não devem ser expostas no frontend. Isto pode incluir uma referência para os seus símbolos secretos da API por exemplo.
• apenas está disponível no servidor ao usar o mesmo $config (ele sobrescreve o publicRuntimeConfig)

export default {
  privateRuntimeConfig: {
    apiSecret: process.env.API_SECRET
  }
}

Usando seus valores de configuração:

Você pode então acessar esses valores em qualquer lugar ao usar o contexto dentro de suas páginas, memória, componentes e plugins ao usar this.$config ou context.$config.

<script>
  asyncData ({ $config: { baseURL } }) {
    const posts = await fetch(`${baseURL}/posts`)
      .then(res => res.json())
  }
</script>

Dentro dos seus modelos você pode acessar suas configurações de tempo de execução diretamente usando $config.*

<template>
  <p>Our Url is: {{ $config.baseURL}}</p>
</template>

A propriedade generate

Esta opção permite você definir valores de parâmetros para cada rota dinâmica dentro da sua aplicação que será transformada em ficheiros HTML pelo Nuxt.

export default {
  generate: {
    dir: 'gh_pages', // gh_pages/ ao invés de dist/
    subFolders: false // Ficheiros HTML são gerados de acordo com caminho da rota
  }
}

head

export default {
    head: {
    title: 'my title',
    meta: [
      { charset: 'utf-8' },
            .....
        ]
    }
}

Esta opção permite você definir todas as metas tags padrão para sua aplicação.

A propriedade loading

Esta opção permite você personalizar o componente de carregamento que o Nuxt usa por padrão.

export default {
  loading: {
    color: '#fff'
  }
}

A propriedade modules

Com esta opção você pode adicionar módulos de Nuxt ao seu projeto.

export default {
  modules: ['@nuxtjs/axios']
}

A propriedade modulesDir

A propriedade modelesDir é usada para definir os diretórios dos módulos para resolução do caminho. Por exemplo: resolveLoading, nodeExternals e postcss do webpack. O caminho de configuração é relativo ao options.rootDir (padrão: process.cwd()).

export default {
  modulesDir: ['../../node_modules']
}

Configurar este campo pode ser necessário se seu projeto está organizado como um espaço de trabalho de mono-repositório com Yarn.

A propriedade plugins

Esta opção permite você definir plugins escritos em JavaScript que devem ser executados antes da inicialização da raiz da aplicação Vue.js.

export default {
  plugins: ['~/plugins/url-helpers.js']
}

A propriedade router

Com a opção router você pode sobrescrever a configuração padrão do Nuxt do Vue Router.

export default {
  router: {
    linkExactActiveClass: 'text-primary'
  }
}

A propriedade server

Está opção permite você configurar as variáveis de conexão para a instância da sua aplicação Nuxt.

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

export default {
  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
      cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
    }
  }
}

A propriedade srcDir

Esta opção permite você definir o diretório fonte da sua aplicação Nuxt.

export default {
  srcDir: 'client/'
}

Exemplo da estrutura do projeto com a sua aplicação Nuxt dentro do diretório client.

**-| app/
---| node_modules/
---| nuxt.config.js
---| package.json
---| client/
------| assets/
------| components/
------| layouts/
------| middleware/
------| pages/
------| plugins/
------| static/
------| store/**

A propriedade dir

Esta opção permite você definir nomes personalizados dos seus diretórios do Nuxt.

export default {
  dir: {
    pages: 'views' // O Nuxt buscará pela pasta views/ ao invés da pasta pages/
  }
}

A propriedade pageTransition

Esta opção permite você definir as propriedades de transições da página.

export default {
  pageTransition: 'page'
}

Outros ficheiros de configuração

Além do nuxt.config.js podem haver outros ficheiros de configuração dentro da raíz do seu projeto, tais como o .eslintrc , prettier.config.json ou .gitignore . Estes são usados para configurar outras ferramentas tais como o seu linter, formatador de código ou o seu repositório do git e independente do nuxt.config.js.

O ficheiro .gitignore

Dentro do seu ficheiro .gitignore você precisará adicionar os seguintes diretórios, assim eles serão ignorados e não adicionados ao controlo de versão. node_modules o qual é onde todos os seus módulos instalados estão. A pasta .nuxt a que é criada quando estiver executando os comandos dev ou build. A pasta dist é a pasta que é criada quando estiver executando o comando generate.

node_modules .nuxt dist

O que segue