Configuração

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

A Propriedade CSS

O Nuxt permite você definir os ficheiros/módulos/bibliotecas CSS que você quiser definer globalmente (incluído dentro de cada página).

Dentro do nuxt.config.js, adicione os recursos do CSS:

export default {
  css: [
    // Carrega um módulo Node.js diretamente (aqui está um ficheiro Sass)
    'bulma',
    // ficheiro CSS dentro do projeto
    '~/assets/css/main.css',
    // ficheiro SCSS dentro do projeto
    '~/assets/css/main.scss'
  ]
}

Extensões do Estilo

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

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

Ordem padrão: ['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less']

Pré-processadores

Graças ao Vue Loader , você pode usar qualquer tipo de pré-processador para o seu <template> ou <style>: use 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 instalar seus carregadores para o 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

Configuração Global

Você pode incluir seus recursos externos dentro da função ou objeto head. Assim como é descrito dentro da documentação da API head , os exemplos seguintes mostram o uso do head como um objeto e como uma função. Se você quiser usar valores do seu componente Vue como propriedades computadas ou dados, você pode usar a função head, retornado o objeto head final. Você pode também passar cada recurso um body: true opcional para incluir o recurso antes do fechamento da tag </body>.

Inclua os seus recursos dentro do nuxt.config.js (aqui dentro do 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'
      }
    ]
  }
}

Configuração Local

Inclua os seus recursos dentro do seu ficheiro .vue dentro do diretório pages/ (aqui dentro da 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>

Plugins do PostCSS

Se apresentar, renomear ou eliminar o postcss.config.js dentro do diretório do projeto. Então, dentro do seu ficheiro nuxt.config.js para adicione o seguinte:

export default {
  build: {
    postcss: {
      // Adicione os nomes do plugins como chaves e argumentos como valores
      // Instale eles antes como dependências com o npm ou yarn
      plugins: {
        // Desative um plugin ao passar false como valor
        'postcss-url': false,
        'postcss-nested': {},
        'postcss-responsive-type': {},
        'postcss-hexrgba': {}
      },
      preset: {
        // Mude as configurações do postcss-preset-env
        autoprefixer: {
          grid: true
        }
      }
    }
  }
}

JSX

O Nuxt usa @nuxt/babel-preset-app , que é baseado @vue/babel-preset-app oficial para a configuração padrão do babel, assim você pode usar JSX dentro dos seus componentes.

Você pode também usar JSX dentro do método render dos seus componentes:

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

Apelidar de createElement para h é uma convenção comum que você verá dentro do ecossistema porém é atualmente opcional para o JSX desde qye ele injete automaticamente const h = this.$createElemet dentro de qualquer método e recebedor (getter) (não em funções ou funções em seta) declarado dentro da sintaxe ES2015 que tem o JSX assim você pode eliminar o parâmetro (h).

Você pode aprender mais sobre como usar ele dentro da secção JSX da documentação do Vue.js.

Ignorando Ficheiros

.nuxtignore

Você pode usar um ficheiro .nuxtignore para deixar o Nuxt ignorar layout, page, store e ficheiros middleware dentro do diretório raiz do seu projeto (rootDir) durante a fase de construção. O ficheiro .nuxtignore está sujeito a mesma especificação que os ficheiros .gitignore e .eslintignore , no qual cada linha é um padrão global indicando quais ficheiros devem ser ignorados.

# ignore o esquema foo.vue

layouts/foo.vue

# ignore os ficheiros de esquemas os quais o nome termina com -ignore.vue

layouts/*-ignore.vue

# ignore a página bar.vue

pages/bar.vue

# ignore a página dentro da pasta ignore

pages/ignore/*.vue

# ignore a memória baz.js

store/baz.js

# ignore os ficheiros de memória correspondente _.test._

store/ignore/_.test._

# ignore ficheiros intermediários dentro da pasta foo exceto foo/bar.js

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

A Propriedade ignorePrefix

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

Por padrão todos ficheiros que começam com - serão ignorados, tais como store/-foo.js e pages/-bar.vue. Isto permite colocar-se testes, utilidades, e componentes com seus chamadores sem eles mesmos serem convertidos em rotas, memórias etc.

A Propriedade ignore

Mais personalizável do que o ignorePrefix: todos ficheiros correspondentes aos padrões globais dentro de ignore serão ignorados durante a construção.

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

A propriedade ignoreOptions

O nuxtignore está usando node-ignore nos bastidores, ignoreOptions pode ser configurado como options de node-ignore.

export default {
  ignoreOptions: {
    ignorecase: false
  }
}

Estender a Configuração do Webpack

Você pode estender a configuração do webpack do Nuxt via opção extend dentro do seu nuxt.config.js. A opção extend da propriedade build é um método que aceita dois argumentos. O primeiro argumento é o objeto config do webpack exportado a partir da configuração do webpack do 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'
      })
      // Defina o modo do webpack para desenvolvimento se a variável `isDev` for true.
      if (isDev) {
        config.mode = 'development'
      }
    }
  }
}

O método extend é chamada duas vezes - uma vez para o pacote do cliente e outra para o pacote do servidor.

Personalize Pedaços de Configuração

Você pode querer ajustar levemente a configuração de otimização , evitando uma rescrita do objeto padrão.

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

Inspecionar A Configuração do Webpack

Para projetos complexos e depurações fâz-se útil verificar algumas vezes como será a configuração final do webpack. Felizmente você pode executar o comando nuxt webpack a partir de dentro do seu projeto para a saída da configuração. Para obter mais detalhes consulte esta PR #7029 .

Adicionar Plugins Ao Webpack

Dentro do seu ficheiro nuxt.config.js, por baixo da opção build, você pode passar plugins ao webpack, da mesma maneira que você faria dentro de um ficheiro webpack.config.js .

Neste exemplo adicionamos o método ProvidePlugin embutido ao webpack para automaticamente carregar módulos do JavaScript (lodash and jQuery) ao invés de ter de os import ou os require por todos os lugares.

import webpack from 'webpack'

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

Note que: você pode não precisar do JQuery dentro de uma aplicação baseada no Vue.

Com o Nuxt, você pode também controlar o contexto de execução dos plugins: se eles serão executados nas construções no client ou dentro do server (ou diferenciando construções do dev e prod) dentro do build.extend , onde você pode também manualmente passar plugins ao webpack.

Estender o Webpack para Carregar Ficheiros de Audio

Ficheiros de audio devem ser processados pelo file-loader. Este carregador já está incluído dentro da configuração padrão do Webpack, mas não está configurado para lidar com ficheiros de audio. Você precisa estender sua configuração padrão dentro do 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]'
        }
      })
    }
  }
}

Você pode agora importar ficheiros de audio como isto <audio :src="require('@/assets/water.mp3')" controls></audio>.

Se você apenas quiser escrever: <audio src="@/assets/water.mp3" controls></audio>, você precisar dizer ao vue-loader para automaticamente requerer ficheiros de audio sempre que você fizer referência a eles 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 padrão, o servidor hospedeiro de desenvolvimento do Nuxt é localhost o qual somente é acessível a partir de dentro da máquina hospedeira. No sentido de ver sua aplicação em outro dispositivo você precisa modificar o hospedeiro. Você pode modificar o hospedeiro dentro do seu ficheiro nuxt.config.js.

O hospedeiro '0.0.0.0' está designado para dizer ao Nuxt para resolver o endereço do hospedeiro, o qual está acessível para conexões fora da máquina hospedeira (exemplo, LAN). Se ao hospedeiro é atribuído o valor string '0' (não 0, o qual é falsy), ou 0.0.0.0 o seu endereço de IP local será atribuído a sua aplicação Nuxt.

export default {
  server: {
    host: '0' // padrão: localhost
  }
}

Você pode também mudar a número da porta da porta padrão de 3000.

export default {
  server: {
    port: 8000 // padrão: 3000
  }
}

Se bem que você pode modificar isto dentro do ficheiro nuxt.config.js, não é aconselhado visto que isto pode causar a você problemas quando estiveres hospedando o seu site. É muito melhor modificar o hospedeiro e a porta direto dentro do comando dev.

HOST=0 PORT=8000 npm run dev

ou criar um script dentro do package.json

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

Configuração Assíncrona

Embora seja melhor usar a configuração normal export default {} você pode ter uma configuração assíncrona ao exportar uma função assíncrona que retorna um 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
      //... resto da configuração
    }
  }
}

Configurações Avançadas