Os sistemas de configuração e hooks do Nuxt tornam possível personalizar todos os aspectos do Nuxt e adicionar qualquer integração que você possa precisar (plugins Vue, CMS, rotas de servidor, componentes, logging, etc.).

Módulos Nuxt são funções que são executadas sequencialmente ao iniciar o Nuxt no modo de desenvolvimento usando nuxt dev ou ao construir um projeto para produção com nuxt build. Com módulos, você pode encapsular, testar adequadamente e compartilhar soluções personalizadas como pacotes npm sem adicionar boilerplate desnecessário ao seu projeto ou exigir alterações no próprio Nuxt.

Início Rápido

Recomendamos que você comece com Módulos Nuxt usando nosso template inicial:

npm create nuxt -- -t module my-module

Isso criará um projeto my-module com todo o boilerplate necessário para desenvolver e publicar seu módulo.

Próximos passos:

1. Abra my-module no seu IDE de escolha
2. Instale as dependências usando seu gerenciador de pacotes favorito
3. Prepare os arquivos locais para desenvolvimento usando npm run dev:prepare
4. Siga este documento para aprender mais sobre Módulos Nuxt

Usando o Template Inicial

Aprenda a realizar tarefas básicas com o template inicial do módulo.

Como Desenvolver

Enquanto o código-fonte do seu módulo reside dentro do diretório src, na maioria dos casos, para desenvolver um módulo, você precisa de uma aplicação Nuxt. É para isso que serve o diretório playground. É uma aplicação Nuxt com a qual você pode mexer e que já está configurada para rodar com seu módulo.

Você pode interagir com o playground como com qualquer aplicação Nuxt.

• Inicie seu servidor de desenvolvimento com npm run dev, ele deve recarregar automaticamente conforme você faz alterações no seu módulo no diretório src
• Construa-o com npm run dev:build

Como Testar

O template inicial do módulo vem com um conjunto básico de testes:

• Um linter alimentado por ESLint, execute-o com npm run lint
• Um executor de testes alimentado por Vitest, execute-o com npm run test ou npm run test:watch

Como Construir

Os Módulos Nuxt vêm com seu próprio construtor fornecido por @nuxt/module-builder. Este construtor não requer nenhuma configuração do seu lado, suporta TypeScript e garante que seus ativos sejam devidamente empacotados para serem distribuídos para outras aplicações Nuxt.

Você pode construir seu módulo executando npm run prepack.

Como Publicar

Embora você possa publicar seu módulo aumentando sua versão e usando o comando npm publish, o template inicial do módulo vem com um script de lançamento que ajuda a garantir que você publique uma versão funcional do seu módulo no npm e mais.

Para usar o script de lançamento, primeiro, faça commit de todas as suas alterações (recomendamos que você siga Conventional Commits para também aproveitar o aumento automático de versão e atualização do changelog), então execute o script de lançamento com npm run release.

Ao executar o script de lançamento, o seguinte acontecerá:

• Primeiro, ele executará seu conjunto de testes por:
  • Executar o linter (npm run lint)
  • Executar testes unitários, de integração e e2e (npm run test)
  • Construir o módulo (npm run prepack)
• Então, se seu conjunto de testes foi bem, ele procederá para publicar seu módulo por:
  • Aumentar a versão do seu módulo e gerar um changelog de acordo com seus Conventional Commits
  • Publicar o módulo no npm (para esse propósito, o módulo será construído novamente para garantir que seu número de versão atualizado seja levado em conta no artefato publicado)
  • Enviar uma tag git representando a nova versão publicada para sua origem remota git

Desenvolvendo Módulos

Os Módulos Nuxt vêm com uma variedade de APIs e padrões poderosos que permitem alterar uma aplicação Nuxt de praticamente qualquer maneira possível. Esta seção ensina como aproveitar esses recursos.

Anatomia do Módulo

Podemos considerar dois tipos de Módulos Nuxt:

• módulos publicados são distribuídos no npm - você pode ver uma lista de alguns módulos da comunidade no site do Nuxt.
• módulos "locais", eles existem dentro de um projeto Nuxt em si, seja inseridos na configuração do Nuxt ou como parte do diretório modules.

Em ambos os casos, sua anatomia é semelhante.

Definição do Módulo

A definição do módulo é o ponto de entrada do seu módulo. É o que é carregado pelo Nuxt quando seu módulo é referenciado dentro de uma configuração Nuxt.

Em um nível baixo, uma definição de Módulo Nuxt é uma função simples, potencialmente assíncrona, que aceita opções de usuário inline e um objeto nuxt para interagir com o Nuxt.

export default function (inlineOptions, nuxt) {
  // Você pode fazer o que quiser aqui..
  console.log(inlineOptions.token) // `123`
  console.log(nuxt.options.dev) // `true` ou `false`
  nuxt.hook('ready', async nuxt => {
    console.log('Nuxt está pronto')
  })
}

Você pode obter suporte a dicas de tipo para esta função usando o helper de nível superior defineNuxtModule fornecido pelo Nuxt Kit.

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule((options, nuxt) => {
  nuxt.hook('pages:extend', pages => {
    console.log(`Descobertas ${pages.length} páginas`)
  })
})

No entanto, não recomendamos usar esta definição de função de baixo nível. Em vez disso, para definir um módulo, recomendamos usar a sintaxe de objeto com a propriedade meta para identificar seu módulo, especialmente ao publicar no npm.

Este helper torna a escrita de módulos Nuxt mais direta, implementando muitos padrões comuns necessários por módulos, garantindo compatibilidade futura e melhorando a experiência tanto para autores de módulos quanto para usuários.

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    // Geralmente o nome do pacote npm do seu módulo
    name: '@nuxtjs/example',
    // A chave em `nuxt.config` que contém as opções do seu módulo
    configKey: 'sample',
    // Restrições de compatibilidade
    compatibility: {
      // Versão Semver das versões suportadas do nuxt
      nuxt: '>=3.0.0'
    }
  },
  // Opções de configuração padrão para seu módulo, também pode ser uma função que retorna essas opções
  defaults: {},
  // Açúcar sintático para registrar hooks do Nuxt
  hooks: {},
  // A função que contém a lógica do seu módulo, pode ser assíncrona
  setup(moduleOptions, nuxt) {
    // ...
  }
})

Em última análise, defineNuxtModule retorna uma função wrapper com a assinatura de módulo de nível inferior (inlineOptions, nuxt). Esta função wrapper aplica padrões e outras etapas necessárias antes de chamar sua função setup:

• Suporte a defaults e meta.configKey para mesclar automaticamente as opções do módulo
• Dicas de tipo e inferência de tipo automatizada
• Adicionar shims para compatibilidade básica com Nuxt 2
• Garantir que o módulo seja instalado apenas uma vez usando uma chave única calculada a partir de meta.name ou meta.configKey
• Registrar automaticamente hooks do Nuxt
• Verificar automaticamente problemas de compatibilidade com base nos metadados do módulo
• Expor getOptions e getMeta para uso interno do Nuxt
• Garantir compatibilidade retroativa e progressiva enquanto o módulo estiver usando defineNuxtModule da versão mais recente de @nuxt/kit
• Integração com ferramentas de construção de módulos

Diretório de Runtime

Módulos, como tudo em uma configuração Nuxt, não são incluídos no runtime da sua aplicação. No entanto, você pode querer que seu módulo forneça ou injete código de runtime na aplicação em que está instalado. É para isso que o diretório de runtime permite que você faça.

Dentro do diretório de runtime, você pode fornecer qualquer tipo de ativo relacionado ao App Nuxt:

• Componentes Vue
• Composables
• Plugins Nuxt

Para o motor de servidor, Nitro:

• Rotas de API
• Middlewares
• Plugins Nitro

Ou qualquer outro tipo de ativo que você queira injetar nas aplicações Nuxt dos usuários:

• Folhas de estilo
• Modelos 3D
• Imagens
• etc.

Você poderá então injetar todos esses ativos dentro da aplicação a partir da sua definição de módulo.

Ferramentas

Os módulos vêm com um conjunto de ferramentas de primeira linha para ajudá-lo em seu desenvolvimento.

@nuxt/module-builder

Nuxt Module Builder é uma ferramenta de construção sem configuração que cuida de todo o trabalho pesado para construir e enviar seu módulo. Ele garante a compatibilidade adequada do artefato de construção do seu módulo com aplicações Nuxt.

@nuxt/kit

Nuxt Kit fornece utilitários compostos para ajudar seu módulo a interagir com aplicações Nuxt. É recomendado usar os utilitários do Nuxt Kit em vez de alternativas manuais sempre que possível para garantir melhor compatibilidade e legibilidade do código do seu módulo.

@nuxt/test-utils

Nuxt Test Utils é uma coleção de utilitários para ajudar a configurar e executar aplicações Nuxt dentro dos testes do seu módulo.

Receitas

Encontre aqui padrões comuns usados para criar módulos.

Alterando a Configuração do Nuxt

A configuração do Nuxt pode ser lida e alterada por módulos. Aqui está um exemplo de um módulo que habilita um recurso experimental.

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    // Criamos o objeto `experimental` se ele ainda não existir
    nuxt.options.experimental ||= {}
    nuxt.options.experimental.componentIslands = true
  }
})

Quando você precisar lidar com alterações de configuração mais complexas, deve considerar usar defu.

Expondo Opções para o Runtime

Como os módulos não fazem parte do runtime da aplicação, suas opções também não. No entanto, em muitos casos, você pode precisar acessar algumas dessas opções de módulo dentro do seu código de runtime. Recomendamos expor a configuração necessária usando o runtimeConfig do Nuxt.

import { defineNuxtModule } from '@nuxt/kit'
import { defu } from 'defu'

export default defineNuxtModule({
  setup (options, nuxt) {
    nuxt.options.runtimeConfig.public.myModule = defu(nuxt.options.runtimeConfig.public.myModule, {
      foo: options.foo
    })
  }
})

Observe que usamos defu para estender a configuração de runtime pública fornecida pelo usuário em vez de sobrescrevê-la.

Você pode então acessar suas opções de módulo em um plugin, componente, na aplicação como qualquer outra configuração de runtime:

const options = useRuntimeConfig().public.myModule

Injetando Plugins Com addPlugin

Plugins são uma maneira comum para um módulo adicionar lógica de runtime. Você pode usar o utilitário addPlugin para registrá-los a partir do seu módulo.

import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    // Criar resolver para resolver caminhos relativos
    const resolver = createResolver(import.meta.url)

    addPlugin(resolver.resolve('./runtime/plugin'))
  }
})

Injetando Componentes Vue Com addComponent

Se seu módulo deve fornecer componentes Vue, você pode usar o utilitário addComponent para adicioná-los como importações automáticas para o Nuxt resolver.

import { defineNuxtModule, addComponent } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)

    // Do diretório de runtime
    addComponent({
      name: 'MySuperComponent', // nome do componente a ser usado em templates vue
      export: 'MySuperComponent', // (opcional) se o componente for uma exportação nomeada (em vez de padrão)
      filePath: resolver.resolve('runtime/components/MySuperComponent.vue')
    })

    // De uma biblioteca
    addComponent({
      name: 'MyAwesomeComponent', // nome do componente a ser usado em templates vue
      export: 'MyAwesomeComponent', // (opcional) se o componente for uma exportação nomeada (em vez de padrão)
      filePath: '@vue/awesome-components'
    })
  }
})

Alternativamente, você pode adicionar um diretório inteiro usando addComponentsDir.

import { defineNuxtModule, addComponentsDir } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)

    addComponentsDir({
      path: resolver.resolve('runtime/components')
    })
  }
})

Injetando Composables Com addImports e addImportsDir

Se seu módulo deve fornecer composables, você pode usar o utilitário addImports para adicioná-los como importações automáticas para o Nuxt resolver.

import { defineNuxtModule, addImports, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)

    addImports({
      name: 'useComposable', // nome do composable a ser usado
      as: 'useComposable',
      from: resolver.resolve('runtime/composables/useComposable') // caminho do composable
    })
  }
})

Alternativamente, você pode adicionar um diretório inteiro usando addImportsDir.

import { defineNuxtModule, addImportsDir, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)

    addImportsDir(resolver.resolve('runtime/composables'))
  }
})

Injetando Rotas de Servidor Com addServerHandler

import { defineNuxtModule, addServerHandler, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)

    addServerHandler({
      route: '/api/hello',
      handler: resolver.resolve('./runtime/server/api/hello/index.get')
    })
  }
})

Você também pode adicionar uma rota de servidor dinâmica:

import { defineNuxtModule, addServerHandler, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)

    addServerHandler({
      route: '/api/hello/:name',
      handler: resolver.resolve('./runtime/server/api/hello/[name].get')
    })
  }
})

Injetando Outros Ativos

Se seu módulo deve fornecer outros tipos de ativos, eles também podem ser injetados. Aqui está um exemplo simples de módulo injetando uma folha de estilo através do array css do Nuxt.

import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    nuxt.options.css.push(resolver.resolve('./runtime/style.css'))
  }
})

E um mais avançado, expondo uma pasta de ativos através da opção publicAssets do Nitro:

import { defineNuxtModule, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    nuxt.hook('nitro:config', async (nitroConfig) => {
      nitroConfig.publicAssets ||= []
      nitroConfig.publicAssets.push({
        dir: resolver.resolve('./runtime/public'),
        maxAge: 60 * 60 * 24 * 365 // 1 ano
      })
    })
  }
})

Usando Outros Módulos no Seu Módulo

Se seu módulo depende de outros módulos, você pode adicioná-los usando o utilitário installModule do Nuxt Kit. Por exemplo, se você quiser usar o Nuxt Tailwind no seu módulo, você poderia adicioná-lo como abaixo:

import { defineNuxtModule, createResolver, installModule } from '@nuxt/kit'

export default defineNuxtModule<ModuleOptions>({
  async setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    // Podemos injetar nosso arquivo CSS que inclui as diretivas do Tailwind
    nuxt.options.css.push(resolver.resolve('./runtime/assets/styles.css'))

    await installModule('@nuxtjs/tailwindcss', {
      // configuração do módulo
      exposeConfig: true,
      config: {
        darkMode: 'class',
        content: {
          files: [
            resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
            resolver.resolve('./runtime/*.{mjs,js,ts}')
          ]
        }
      }
    })
  }
})

Usando Hooks

Hooks de ciclo de vida permitem que você expanda quase todos os aspectos do Nuxt. Os módulos podem se conectar a eles programaticamente ou através do mapa hooks em sua definição.

import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  // Conectar ao hook `app:error` através do mapa `hooks`
  hooks: {
    'app:error': (err) => {
      console.info(`Este erro ocorreu: ${err}`);
    }
  },
  setup (options, nuxt) {
    // Conectar programaticamente ao hook `pages:extend`
    nuxt.hook('pages:extend', (pages) => {
      console.info(`Descobertas ${pages.length} páginas`);
    })
  }
})

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    nuxt.hook('close', async nuxt => {
      // Seu código personalizado aqui
    })
  }
})

Adicionando Templates/Arquivos Virtuais

Se você precisar adicionar um arquivo virtual que possa ser importado no aplicativo do usuário, você pode usar o utilitário addTemplate.

import { defineNuxtModule, addTemplate } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    // O arquivo é adicionado ao sistema de arquivos virtual interno do Nuxt e pode ser importado de '#build/my-module-feature.mjs'
    addTemplate({
      filename: 'my-module-feature.mjs',
      getContents: () => 'export const myModuleFeature = () => "hello world !"'
    })
  }
})

Para o servidor, você deve usar o utilitário addServerTemplate.

import { defineNuxtModule, addServerTemplate } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    // O arquivo é adicionado ao sistema de arquivos virtual do Nitro e pode ser importado no código do servidor de 'my-server-module.mjs'
    addServerTemplate({
      filename: 'my-server-module.mjs',
      getContents: () => 'export const myServerModule = () => "hello world !"'
    })
  }
})

Adicionando Declarações de Tipo

Você também pode querer adicionar uma declaração de tipo ao projeto do usuário (por exemplo, para aumentar uma interface Nuxt ou fornecer um tipo global próprio). Para isso, o Nuxt fornece o utilitário addTypeTemplate que tanto escreve um template no disco quanto adiciona uma referência a ele no arquivo nuxt.d.ts gerado.

Se seu módulo deve aumentar tipos manipulados pelo Nuxt, você pode usar addTypeTemplate para realizar essa operação:

import { defineNuxtModule, addTemplate, addTypeTemplate } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `// Gerado por my-module
        interface MyModuleNitroRules {
          myModule?: { foo: 'bar' }
        }
        declare module 'nitropack' {
          interface NitroRouteRules extends MyModuleNitroRules {}
          interface NitroRouteConfig extends MyModuleNitroRules {}
        }
        export {}`
    })
  }
})

Se você precisar de controle mais granular, pode usar o hook prepare:types para registrar um callback que injetará seus tipos.

const template = addTemplate({ /* opções de template */ })
nuxt.hook('prepare:types', ({ references }) => {
  references.push({ path: template.dst })
})

Atualizando Templates

Se você precisar atualizar seus templates/arquivos virtuais, pode aproveitar o utilitário updateTemplates assim:

nuxt.hook('builder:watch', async (event, path) => {
  if (path.includes('my-module-feature.config')) {
    // Isso recarregará o template que você registrou
    updateTemplates({ filter: t => t.filename === 'my-module-feature.mjs' })
  }
})

Testando

Testar ajuda a garantir que seu módulo funcione como esperado em várias configurações. Encontre nesta seção como realizar vários tipos de testes contra seu módulo.

Unitário e de Integração

End to End

Nuxt Test Utils é a biblioteca ideal para ajudá-lo a testar seu módulo de forma end-to-end. Aqui está o fluxo de trabalho a adotar com ele:

1. Crie uma aplicação Nuxt para ser usada como "fixture" dentro de test/fixtures/*
2. Configure o Nuxt com este fixture dentro do seu arquivo de teste
3. Interaja com o fixture usando utilitários de @nuxt/test-utils (por exemplo, buscando uma página)
4. Realize verificações relacionadas a este fixture (por exemplo, "HTML contém ...")
5. Repita

Na prática, o fixture:

// 1. Crie uma aplicação Nuxt para ser usada como "fixture"
import MyModule from '../../../src/module'

export default defineNuxtConfig({
  ssr: true,
  modules: [
    MyModule
  ]
})

E seu teste:

import { describe, it, expect } from 'vitest'
import { fileURLToPath } from 'node:url'
import { setup, $fetch } from '@nuxt/test-utils/e2e'

describe('ssr', async () => {
  // 2. Configure o Nuxt com este fixture dentro do seu arquivo de teste
  await setup({
    rootDir: fileURLToPath(new URL('./fixtures/ssr', import.meta.url)),
  })

  it('renderiza a página de índice', async () => {
    // 3. Interaja com o fixture usando utilitários de `@nuxt/test-utils`
    const html = await $fetch('/')

    // 4. Realize verificações relacionadas a este fixture
    expect(html).toContain('<div>ssr</div>')
  })
})

// 5. Repita
describe('csr', async () => { /* ... */ })

QA Manual Com Playground e Externamente

Ter uma aplicação playground Nuxt para testar seu módulo ao desenvolvê-lo é realmente útil. O template inicial do módulo integra um para esse propósito.

Você pode testar seu módulo com outras aplicações Nuxt (aplicações que não fazem parte do repositório do seu módulo) localmente. Para fazer isso, você pode usar o comando npm pack, ou o equivalente do seu gerenciador de pacotes, para criar um tarball do seu módulo. Em seguida, em seu projeto de teste, você pode adicionar seu módulo aos pacotes package.json como: "my-module": "file:/path/to/tarball.tgz".

Depois disso, você deve ser capaz de referenciar my-module como em qualquer projeto regular.

Melhores Práticas

Com grande poder vem grande responsabilidade. Embora os módulos sejam poderosos, aqui estão algumas melhores práticas a serem lembradas ao criar módulos para manter as aplicações performáticas e a experiência do desenvolvedor excelente.

Módulos Assíncronos

Como vimos, os Módulos Nuxt podem ser assíncronos. Por exemplo, você pode querer desenvolver um módulo que precise buscar alguma API ou chamar uma função assíncrona.

No entanto, tenha cuidado com comportamentos assíncronos, pois o Nuxt aguardará seu módulo configurar antes de passar para o próximo módulo e iniciar o servidor de desenvolvimento, processo de construção, etc. Prefira adiar a lógica demorada para hooks do Nuxt.

Sempre Prefixe Interfaces Expostas

Os Módulos Nuxt devem fornecer um prefixo explícito para qualquer configuração exposta, plugin, API, composable ou componente para evitar conflitos com outros módulos e internos.

Idealmente, você deve prefixá-los com o nome do seu módulo (por exemplo, se seu módulo se chama nuxt-foo, exponha <FooButton> e useFooBar() e não <Button> e useBar()).

Seja Amigável ao TypeScript

O Nuxt tem integração de primeira classe com TypeScript para a melhor experiência do desenvolvedor.

Expor tipos e usar TypeScript para desenvolver módulos beneficia os usuários mesmo quando não estão usando TypeScript diretamente.

Evite Sintaxe CommonJS

O Nuxt depende de ESM nativo. Por favor, leia Módulos ES Nativos para mais informações.

Documente o Uso do Módulo

Considere documentar o uso do módulo no arquivo readme:

• Por que usar este módulo?
• Como usar este módulo?
• O que este módulo faz?

Linkar para o site de integração e documentação é sempre uma boa ideia.

Forneça uma Demonstração ou Boilerplate no StackBlitz

É uma boa prática fazer uma reprodução mínima com seu módulo e StackBlitz que você adiciona ao seu readme do módulo.

Isso não apenas fornece aos potenciais usuários do seu módulo uma maneira rápida e fácil de experimentar o módulo, mas também uma maneira fácil para eles construírem reproduções mínimas que podem enviar para você quando encontrarem problemas.

Não Anuncie Com uma Versão Específica do Nuxt

O Nuxt, Nuxt Kit e outras novas ferramentas são feitas para ter compatibilidade tanto para frente quanto para trás em mente.

Por favor, use "X para Nuxt" em vez de "X para Nuxt 3" para evitar fragmentação no ecossistema e prefira usar meta.compatibility para definir restrições de versão do Nuxt.

Mantenha-se Com os Padrões do Template Inicial

O template inicial do módulo vem com um conjunto padrão de ferramentas e configurações (por exemplo, configuração do ESLint). Se você planeja abrir o código do seu módulo, manter esses padrões garante que seu módulo compartilhe um estilo de codificação consistente com outros módulos da comunidade por aí, facilitando para outros contribuírem.

Ecossistema

O ecossistema de Módulos Nuxt representa mais de 15 milhões de downloads mensais no NPM e fornece funcionalidades e integrações estendidas com todos os tipos de ferramentas. Você pode fazer parte deste ecossistema!

Tipos de Módulos

Módulos oficiais são módulos prefixados (escopados) com @nuxt/ (por exemplo, @nuxt/content). Eles são feitos e mantidos ativamente pela equipe Nuxt. Assim como com o framework, contribuições da comunidade são mais do que bem-vindas para ajudar a torná-los melhores!

Módulos da comunidade são módulos prefixados (escopados) com @nuxtjs/ (por exemplo, @nuxtjs/tailwindcss). Eles são módulos comprovados feitos e mantidos por membros da comunidade. Novamente, contribuições são bem-vindas de qualquer pessoa.

Módulos de terceiros e outros módulos da comunidade são módulos (frequentemente) prefixados com nuxt-. Qualquer pessoa pode fazê-los, usar este prefixo permite que esses módulos sejam descobertos no npm. Este é o melhor ponto de partida para esboçar e tentar uma ideia!

Módulos privados ou pessoais são módulos feitos para seu próprio caso de uso ou empresa. Eles não precisam seguir nenhuma regra de nomenclatura para funcionar com o Nuxt e são frequentemente vistos escopados sob uma organização npm (por exemplo, @my-company/nuxt-auth)

Listando Seu Módulo da Comunidade

Qualquer módulo da comunidade é bem-vindo para ser listado na lista de módulos. Para ser listado, abra uma issue no repositório nuxt/modules. A equipe Nuxt pode ajudá-lo a aplicar as melhores práticas antes de listar.

Juntando-se a nuxt-modules e @nuxtjs/

Ao mover seus módulos para nuxt-modules, sempre há alguém para ajudar, e dessa forma, podemos unir forças para fazer uma solução perfeita.

Se você tem um módulo já publicado e funcionando, e deseja transferi-lo para nuxt-modules, abra uma issue no nuxt/modules.

Ao se juntar a nuxt-modules, podemos renomear seu módulo da comunidade sob o escopo @nuxtjs/ e fornecer um subdomínio (por exemplo, my-module.nuxtjs.org) para sua documentação.