A propriedade components

O Nuxt 2.13+ pode examinar e importar automaticamente os seus componentes usando o módulo @nuxt/components

• Tipo: Boolean ou Array
• Valor padrão: false

Quando definir para true ou para um objeto de opções, o Nuxt incluirá @nuxt/components e importar automaticamente o seus componentes sempre que você user eles dentro das suas páginas, esquemas (e outros componentes).

Configuração

export default {
  // Isto irá carregar automaticamente os componentes da pasta `~/components`
  components: true
}

Como o components: true, por padrão o diretório ~/components será incluído.

No entanto você pode personalizar comportamento da descoberta automática pelo fornecimento de diretórios adicionais para examinar:

export default {
  components: [
    // Equivalente a { path: '~/components' }
    '~/components',
    { path: '~/components/other', extensions: ['vue'] }
  ]
}

A propriedade path

Cada item pode ser tanto uma sequência de caracteres ou um objeto. Uma valor de sequência de caracteres é um atalho para { path: }.

A propriedade path

• Obrigatório
• Tipo: String

O caminho (absoluto ou relativo) para o diretório que contém seus componentes.

Você pode usar os apelidos do Nuxt (~ ou @) para referir aos diretórios dentro do projeto ou usar diretamente um caminho de pacote npm (similar ao uso de require dentro do seu projeto).

A propriedade extensions

• Tipo: Array<string>
• Valor padrão:
  • Extensões suportadas pelo construtor do Nuxt (builder.supportedExtensions)
  • Extensões padrão suportadas ['vue', 'js'] ou ['vue', 'js', 'ts', 'tsx'] dependendo do seu ambiente

Exemplo: Suportar a estrutura de componente de vários ficheiros

Se você preferir separar seus componentes de ficheiro único (SFCs) em .js, .vue e .css, você pode escolher apenas examinar ficheiros .vue:

| components
---| componentC
------| componentC.vue
------| componentC.js
------| componentC.scss

// nuxt.config.js
export default {
  components: [{ path: '~/components', extensions: ['vue'] }]
}

A propriedade pattern

• Tipo: string (padrão glob )
• Valor padrão: **/*.${extensions.join(',')}

Dentro do path (caminho) especificado, apenas ficheiros que corresponderem a este padrão serão incluídos.

A propriedade ignore

• Tipo: Array
• Itens: string (padrão glob )
• Valor padrão: []

Padrões para excluir ficheiros dentro do path (caminho) especificado.

A propriedade prefix

• Tipo: String
• Valor padrão: '' (sem prefixo)

Prefixa todos componentes correspondidos.

O exemplo abaixo adiciona o prefixo awesome-/awesome ao nome dos componentes dentro do diretório awesome/.

// nuxt.config.js
export default {
  components: [
    '~/components',
    { path: '~/components/awesome/', prefix: 'awesome' }
  ]
}

| components/
---| awesome/
------| Button.vue
---| Button.vue

<template>
  <div>
    <AwesomeButton>Click on me 🤘</AwesomeButton>
    <button>Click on me</button>
  </div>
</template>

A propriedade pathPrefix

• Tipo: Boolean
• Valor padrão: true

Prefixa o nome do componente pelo seu caminho.

A propriedade watch

• Tipo: Boolean
• Valor padrão: true

Observa mudanças no path (caminho) especificado, incluindo adição e eliminação de ficheiros.

A propriedade transpile

• Tipo: Boolean
• Valor padrão: 'auto'

Transpila o path (caminho) especificado usando o build.transpile . Por padrão ('auto') definirá transpile: true se o node_modules estiver dentro path (caminho).

A propriedade level

• Tipo: Number
• Valor padrão: 0

Níveis são usados para definir permissão sobrescrevendo componentes que tem o mesmo nome dentro dentro de diretórios diferentes. Isto pode ser útil para autores de bibliotecas que desejam permitir os usuários sobrescrever seus componentes, ou personalizar os temas.

export default {
  components: [
    '~/components', // O nível padrão é 0
    { path: 'my-theme/components', level: 1 }
  ]
}

Um componente dentro de ~/components irá então sobrescrever um componente com o mesmo nome dentro de my-theme/components. O valor mais baixo recebe prioridade.

Avançado

Sobrescrevendo Componentes

É possível ter uma maneira para sobrescrever componentes usando a opção level . Isto é muito útil para autores de módulos e temas.

Considerando esta estrutura:

| node_modules/
---| my-theme/
------| components/
---------| Header.vue
| components/
---| Header.vue

Então definindo dentro do nuxt.config:

components: [
  '~/components', // O nível padrão é 0
  { path: 'node_modules/my-theme/components', level: 1 }
]

O nosso components/Header.vue sobrescreverá o nosso componente do tema visto que o valor nível mais baixo recebe prioridade.

Autores de Biblioteca

Produzir bibliotecas de componentes de Vue com sacudidela de árvore (tree-shaking) automática e registo de componente é agora super fácil✨

Este módulo expõe um gatilho nomeado components:dirs assim você pode facilmente estender a lista de diretório sem a exigência de configuração do usuário dentro do seu módulo do Nuxt.

Imagina uma estrutura de diretório como esta:

| node_modules/
---| awesome-ui/
------| components/
---------| Alert.vue
---------| Button.vue
------| nuxt.js
| pages/
---| index.vue
| nuxt.config.js

Depois dentro awesome-ui/nuxt.js você pode usar o gatilho components:dir:

import { join } from 'path'

export default function () {
  this.nuxt.hook('components:dirs', dirs => {
    // Adiciona diretório ./components à lista
    dirs.push({
      path: join(__dirname, 'components'),
      prefix: 'awesome'
    })
  })
}

E é isso! Agora dentro do seu projeto, você pode importar sua biblioteca de UI como um módulo do Nuxt dentro do seu nuxt.config.js:

export default {
  buildModules: ['@nuxt/components', 'awesome-ui/nuxt']
}

E use o módulo de componentes diretamente (prefixado com awesome-), em nossa pages/index.vue:

<template>
  <div>
    My <AwesomeButton>UI button</AwesomeButton>!
    <awesome-alert>Here's an alert!</awesome-alert>
  </div>
</template>

Ele importará automaticamente os componentes somente se usado e se também suportar HMR quando estiver atualizando seus componentes dentro de node_modules/awesome-ui/components/.

Proximo: publicar o seu módulo awesome-ui no npm e partilhar ele com outros Nuxteres ✨