Руководство для автора модуля

Nuxt-конфиг и хуки позволяют настроить каждый аспект Nuxt и добавить любую интеграцию, которая может вам понадобиться (плагины Vue, CMS, серверные маршруты, компоненты, логирование и т.д.).

Модули Nuxt - это функции, которые последовательно запускаются при запуске Nuxt в режиме разработки с помощью nuxt dev или при сборке проекта для продакшена с помощью nuxt build. С помощью модулей вы можете инкапсулировать, правильно тестировать и делиться пользовательскими решениями в виде пакетов npm, не добавляя в проект ненужный шаблон и не требуя изменений в самом Nuxt.

Быстрый старт

Мы рекомендуем вам начать работу с модулями Nuxt, используя наш стартовый шаблон:

npm create nuxt -- -t module my-module

yarn create nuxt -t module my-module

pnpm create nuxt -t module my-module

bun create nuxt -t module my-module

Это создаст проект my-module со всем необходимым кодом для разработки и публикации вашего модуля.

Дальнейшие шаги:

1. Откройте my-module в выбранной вами IDE.
2. Установите зависимости, используя ваш любимый менеджер пакетов.
3. Подготовьте локальные файлы для разработки с помощью npm run dev:prepare.
4. Следуйте этому руководству, чтобы узнать больше о модулях Nuxt.

Использование модуля-стартера

Как разрабатывать

Хотя исходный код вашего модуля находится в директории src, в большинстве случаев для разработки модуля вам нужно приложение Nuxt. Именно для этого и существует директория playground. Это настроенное для работы с вашим модулем приложение Nuxt, с которым вы можете возиться.

Вы можете взаимодействовать с playground, как с любым приложением Nuxt.

• Запустите сервер разработки с помощью npm run dev, он должен перезагрузиться, когда вы вносите изменения в ваш модуль в директории src.
• Соберите его с помощью npm run dev:build.

Как тестировать

Стартовый модуль поставляется с базовым набором тестов:

• Линтер на основе ESLint, запускайте его с помощью npm run lint.
• Тест-раннер на основе Vitest, запускайте его с помощью npm run test или npm run test:watch.

Как билдить

Модули Nuxt поставляются с собственным конструктором, предоставляемым @nuxt/module-builder. Этот билдер не требует никаких настроек с вашей стороны, поддерживает TypeScript и гарантирует, что ваши ассеты будут правильно упакованы для распространения в других приложениях Nuxt.

Вы можете собрать свой модуль, выполнив команду npm run prepack.

Как опубликовать

Хотя вы можете опубликовать свой модуль, повысив его версию и используя команду npm publish, в комплекте со стартером модуля поставляется скрипт релиза, который поможет вам убедиться, что вы опубликовали рабочую версию вашего модуля в npm и не только.

Чтобы воспользоваться скриптом релиза, сначала зафиксируйте все изменения (мы рекомендуем следовать Conventional Commits, чтобы воспользоваться преимуществами автоматического повышения версии и обновления журнала изменений), а затем запустите скрипт с помощью команды npm run release.

При запуске скрипта релиза произойдет следующее:

• Сначала он запустит ваш набор тестов:
  • Запускает линтер (npm run lint)
  • Запуск юнит, интеграционных и e2e тестов (npm run test)
  • Сборка модуля (npm run prepack)
• Затем, если набор тестов прошел успешно, модуль будет опубликован:
  • Повышение версии модуля и создание журнала изменений в соответствии с вашими Conventional Commits
  • Публикация модуля в npm (для этого модуль будет собран заново, чтобы убедиться, что его обновленный номер версии учтен в опубликованном артефакте)
  • Отправка git-тега, представляющего новую опубликованную версию, на ваш git remote origin

Разработка модулей

Модули Nuxt имеют множество мощных API и шаблонов, позволяющих изменять приложение Nuxt практически всеми возможными способами. В этом разделе вы узнаете, как ими воспользоваться.

Анатомия модуля

Мы можем рассмотреть два вида модулей Nuxt:

• Опубликованные модули распространяются на npm - вы можете посмотреть список некоторых модулей сообщества на сайте Nuxt.
• "Локальные" модули, они существуют внутри самого проекта Nuxt, либо вписаны в конфигурацию Nuxt, либо как часть директории modules.

В любом случае их анатомия похожа.

Определение модуля

Определение модуля - это точка входа вашего модуля. Это то, что загружает Nuxt, когда на ваш модуль ссылаются в конфигурации Nuxt.

На низком уровне, определение модуля Nuxt - это простая, потенциально асинхронная функция, принимающая встроенные пользовательские опции и объект nuxt для взаимодействия с Nuxt.

export default function (inlineOptions, nuxt) {
  // Вы можете сделать здесь, что захотите..
  console.log(inlineOptions.token) // `123`
  console.log(nuxt.options.dev) // `true` или `false`
  nuxt.hook('ready', async nuxt => {
    console.log('Nuxt готов!')
  })
}

Вы можете получить поддержку подсказки типов для этой функции с помощью высокоуровневого помощника defineNuxtModule, предоставляемого Nuxt Kit.

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule((options, nuxt) => {
  nuxt.hook('pages:extend', pages => {
    console.log(`Обнаружено такое количество страниц - ${pages.length}`)
  })
})

Однако мы не рекомендуем использовать такое низкоуровневое определение функции. Вместо этого, мы рекомендуем использовать объектный синтаксис со свойством meta для идентификации модуля, особенно при публикации на npm.

Этот помощник делает написание модулей Nuxt более простым, реализуя многие общие шаблоны, необходимые модулям, гарантируя будущую совместимость и улучшая опыт как для авторов модулей, так и для пользователей.

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    // Обычно это имя пакета npm вашего модуля
    name: '@nuxtjs/example',
    // Ключ в файле `nuxt.config`, содержащий параметры вашего модуля
    configKey: 'sample',
    // Ограничения совместимости
    compatibility: {
      // Semver поддерживаемых версий nuxt
      nuxt: '>=3.0.0'
    }
  },
  // Параметры конфигурации по умолчанию для вашего модуля, также может быть функцией, возвращающей эти параметры
  defaults: {},
  // Сокращенное обозначение для регистрации хуков Nuxt
  hooks: {},
  // Функция, содержащая логику вашего модуля; она может быть асинхронной
  setup(moduleOptions, nuxt) {
    // ...
  }
})

В конечном итоге defineNuxtModule возвращает функцию-обертку с сигнатурой модуля нижнего уровня (inlineOptions, nuxt). Эта функция-обертка применяет настройки по умолчанию и другие необходимые действия перед вызовом вашей функции setup:

• Поддержка defaults и meta.configKey для автоматического объединения опций модуля
• Подсказки типов и автоматический вывод типов
• Добавление "вставок" для базовой совместимости с Nuxt 2
• Убедитесь, что модуль устанавливается только один раз, используя уникальный ключ, вычисляемый из meta.name или meta.configKey
• Автоматическая регистрация хуков Nuxt
• Автоматическая проверка на проблемы совместимости на основе мета модуля
• Предоставление getOptions и getMeta для внутреннего использования Nuxt
• Обеспечение обратной и будущей совместимости при условии, что модуль использует defineNuxtModule из последней версии @nuxt/kit.
• Интеграция с инструментарием для создания модулей

Runtime-директория

Модули, как и все остальное в конфигурации Nuxt, не включаются в runtime вашего приложения. Тем не менее вы можете захотеть, чтобы ваш модуль предоставлял или внедрял runtime-код в приложение, на которое он установлен. Именно это и позволяет сделать runtime-директория.

Внутри директории runtime вы можете предоставить любые ассеты, связанные с Nuxt App:

• Компоненты Vue
• Композаблы
• Nuxt-плагины

К серверному движку, Nitro:

• API-маршруты
• Middlewares
• Плагины Nitro

Или любой другой вид ассетов, который вы хотите внедрить в Nuxt-приложения пользователей:

• CSS
• 3D-модели
• Изображения
• и т.д.

Затем вы сможете внедрить все эти ассеты в приложение из вашего определения модуля.

Инструментарий

Модули поставляются с набором сторонних инструментов, которые помогут вам в их разработке.

@nuxt/module-builder

Nuxt Module Builder - это инструмент сборки с нулевой конфигурацией, который берет на себя всю тяжелую работу по сборке и поставке вашего модуля. Он обеспечивает надлежащую совместимость артефакта сборки вашего модуля с приложениями Nuxt.

@nuxt/kit

Nuxt Kit предоставляет композаблы и утилиты, помогающие вашему модулю взаимодействовать с приложениями Nuxt. Рекомендуется использовать утилиты Nuxt Kit вместо ручных альтернатив, когда это возможно, чтобы обеспечить лучшую совместимость и читаемость кода вашего модуля.

@nuxt/test-utils

Nuxt Test Utils - это коллекция утилит, помогающих настраивать и запускать приложения Nuxt в тестах ваших модулей.

Рецепты

Здесь вы найдете общие шаблоны, используемые для создания модулей.

Изменение конфигурации Nuxt

Конфигурация Nuxt может быть прочитана и изменена модулями. Вот пример модуля, включающего экспериментальную функцию.

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    // Мы создаем объект `experimental`, если он еще не существует
    nuxt.options.experimental ||= {}
    nuxt.options.experimental.componentIslands = true
  }
})

Если вам необходимо выполнить более сложные изменения конфигурации, следует использовать defu.

Выставление опций для рантайма

Поскольку модули не являются частью runtime приложения, их опции также не являются таковыми. Тем не менее во многих случаях вам может понадобиться доступ к некоторым из этих опций модуля в вашем runtime-коде. Мы рекомендуем "открывать" нужный конфиг с помощью Nuxt'овского runtimeConfig.

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
    })
  }
})

Обратите внимание, что мы используем defu для расширения runtime-конфига, которую предоставляет пользователь, а не для ее перезаписи.

После этого вы можете получить доступ к опциям модуля в плагине, компоненте или приложении, как к любой другой runtime-конфигурации:

const options = useRuntimeConfig().public.myModule

Добавление плагинов при помощи addPlugin

Плагины - это обычный способ добавления модулем логики во время выполнения. Вы можете использовать утилиту addPlugin для их регистрации из вашего модуля.

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

export default defineNuxtModule({
  setup (options, nuxt) {
    // Создайте резолвер для разрешения относительных путей
    const resolver = createResolver(import.meta.url)

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

Добавление Vue-компонентов при помощи addComponent

Если ваш модуль должен предоставлять компоненты Vue, вы можете использовать утилиту addComponent, чтобы добавить их в качестве автоимпортов для разрешения Nuxt.

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

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

    // Из runtime-директории
    addComponent({
      name: 'MySuperComponent', // имя компонента, который будет использоваться в шаблонах vue
      export: 'MySuperComponent', // (опциональный) если компонент является именованным (а не дефолтным) экспортом
      filePath: resolver.resolve('runtime/components/MySuperComponent.vue')
    })

    // Из библиотеки
    addComponent({
      name: 'MyAwesomeComponent', // имя компонента, который будет использоваться в шаблонах vue
      export: 'MyAwesomeComponent', // (опциональный) если компонент является именованным (а не дефолтным) экспортом
      filePath: '@vue/awesome-components'
    })
  }
})

Кроме того, вы можете добавить целую директорию с помощью 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')
    })
  }
})

Добавление композаблов при помощи addImports и addImportsDir

Если ваш модуль должен предоставлять композаблы, вы можете использовать утилиту addImports, чтобы добавить их в качестве автоимпортов для разрешения Nuxt.

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

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

    addImports({
      name: 'useComposable', // имя композабла, который будет использоваться
      as: 'useComposable',
      from: resolver.resolve('runtime/composables/useComposable') // путь к композаблу
    })
  }
})

Кроме того, вы можете добавить целую директорию с помощью 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'))
  }
})

Добавление серверных маршрутов при помощи 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')
    })
  }
})

Можно также добавить динамический маршрут сервера:

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')
    })
  }
})

Добавление других ассетов

Если ваш модуль должен предоставлять другие виды ассетов, их также можно добавить. Вот простой пример модуля, добавляющий таблицу стилей через массив css в 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'))
  }
})

И более продвинутый вариант - "раскрытие" папки с ассетами через опцию publicAssets в 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 год
      })
    })
  }
})

Использование других модулей в вашем модуле

Если ваш модуль зависит от других модулей, вы можете добавить их с помощью утилиты Nuxt Kit installModule. Например, если вы хотите использовать Nuxt Tailwind в своем модуле, вы можете добавить его следующим образом:

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

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

    // Мы можем внедрить наш CSS-файл, который включает директивы Tailwind
    nuxt.options.css.push(resolver.resolve('./runtime/assets/styles.css'))

    await installModule('@nuxtjs/tailwindcss', {
      // конфигурация модуля
      exposeConfig: true,
      config: {
        darkMode: 'class',
        content: {
          files: [
            resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
            resolver.resolve('./runtime/*.{mjs,js,ts}')
          ]
        }
      }
    })
  }
})

Использование хуков

Хуки жизненного цикла позволяют расширить практически все аспекты Nuxt. Модули могут подключаться к ним программно или через объект hooks в их определении.

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

export default defineNuxtModule({
  // Переход к хуку `app:error` через объект `hooks`.
  hooks: {
    'app:error': (err) => {
      console.info(`Произошла ошибка: ${err}`);
    }
  },
  setup (options, nuxt) {
    // Программное подключение к хуку `pages:extend`.
    nuxt.hook('pages:extend', (pages) => {
      console.info(`Обнаружено такое количество страниц - ${pages.length}`);
    })
  }
})

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    nuxt.hook('close', async nuxt => {
      // Ваш пользовательский код здесь
    })
  }
})

Custom Hooks

Modules can also define and call their own hooks, which is a powerful pattern for making your module extensible.

If you expect other modules to be able to subscribe to your module's hooks, you should call them in the modules:done hook. This ensures that all other modules have had a chance to be set up and register their listeners to your hook during their own setup function.

// my-module/module.ts
import { defineNuxtModule } from '@nuxt/kit'

export interface ModuleHooks {
  'my-module:custom-hook': (payload: { foo: string }) => void
}

export default defineNuxtModule({
  setup (options, nuxt) {
    // Call your hook in `modules:done`
    nuxt.hook('modules:done', async () => {
      const payload = { foo: 'bar' }
      await nuxt.callHook('my-module:custom-hook', payload)
    })
  }
})

Добавление шаблонов/виртуальных файлов

Если вам нужно добавить виртуальный файл, который может быть импортирован в пользовательское приложение, вы можете воспользоваться утилитой addTemplate.

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

export default defineNuxtModule({
  setup (options, nuxt) {
    // Файл добавляется во внутреннюю виртуальную файловую систему Nuxt и может быть импортирован из '#build/my-module-feature.mjs'.
    addTemplate({
      filename: 'my-module-feature.mjs',
      getContents: () => 'export const myModuleFeature = () => "hello world !"'
    })
  }
})

For the server, you should use the addServerTemplate utility instead.

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

export default defineNuxtModule({
  setup (options, nuxt) {
    // The file is added to Nitro's virtual file system and can be imported in the server code from 'my-server-module.mjs'
    addServerTemplate({
      filename: 'my-server-module.mjs',
      getContents: () => 'export const myServerModule = () => "hello world !"'
    })
  }
})

Добавление деклараций типов

Вы также можете захотеть добавить объявление типа в пользовательский проект (например, чтобы дополнить интерфейс Nuxt или для создания собственного глобального типа). Для этого Nuxt предоставляет утилиту addTypeTemplate, которая одновременно записывает шаблон на диск и добавляет ссылку на него в генерируемый файл nuxt.d.ts.

Если ваш модуль должен дополнить типы, обрабатываемые Nuxt, вы можете использовать addTypeTemplate для выполнения этой операции:

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

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

Если вам нужен более детальный контроль, вы можете использовать хук prepare:types для регистрации коллбэка, который будет внедрять ваши типы.

const template = addTemplate({ /* опции шаблона */ })
nuxt.hook('prepare:types', ({ references }) => {
  references.push({ path: template.dst })
})

Обновление шаблонов

Если вам нужно обновить шаблоны/виртуальные файлы, вы можете воспользоваться утилитой updateTemplates, как показано ниже:

nuxt.hook('builder:watch', async (event, path) => {
  if (path.includes('my-module-feature.config')) {
    // Это перезагрузит шаблон, который вы зарегистрировали
    updateTemplates({ filter: t => t.filename === 'my-module-feature.mjs' })
  }
})

Тестирование

Тестирование помогает убедиться, что ваш модуль работает так, как ожидается, при различных настройках. В этом разделе вы узнаете, как выполнить различные виды тестов для вашего модуля.

Модульное (unit) и интеграционное (integration)

E2E

Nuxt Test Utils - это библиотека, которая поможет вам протестировать ваш модуль в E2E-режиме. Вот схема работы с ней:

1. Создайте приложение Nuxt для использования в качестве "fixture" внутри test/fixtures/*.
2. Настройте Nuxt с этим fixture внутри вашего тестового файла.
3. Взаимодействуйте с fixture, используя утилиты из @nuxt/test-utils (например, получение страницы).
4. Выполните проверки, связанные с этим fixture (например, "HTML содержит ...")
5. Повторите!

На практике, fixture - это:

// 1. Создайте приложение Nuxt, которое будет использоваться в качестве "fixture".
import MyModule from '../../../src/module'

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

И его тест:

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

describe('ssr', async () => {
  // 2. Установите Nuxt с этим fixture внутри вашего тестового файла
  await setup({
    rootDir: fileURLToPath(new URL('./fixtures/ssr', import.meta.url)),
  })

  it('renders the index page', async () => {
    // 3. Взаимодействуйте с fixture, используя утилиты из `@nuxt/test-utils`.
    const html = await $fetch('/')

    // 4. Выполните проверки, связанные с этим fixture
    expect(html).toContain('<div>ssr</div>')
  })
})

// 5. Повторите!
describe('csr', async () => { /* ... */ })

Ручной QA внутри playground и за его пределами

Наличие приложения Nuxt для тестирования модуля при его разработке очень полезно. Модуль-стартер интегрирует одно из них для этой цели.

Вы можете протестировать свой модуль с другими приложениями Nuxt (приложениями, которые не являются частью вашего репозитория модулей) локально. Для этого вы можете использовать команду npm pack, или эквивалент вашего пакетного менеджера, чтобы создать tarball из вашего модуля. Затем в своем тестовом проекте вы можете добавить свой модуль в пакет package.json следующим образом: "my-module": "file:/path/to/tarball.tgz".

После этого вы сможете ссылаться на my-module как в любом обычном проекте.

Лучшие практики

С большой силой приходит большая ответственность. Несмотря на то, что модули обладают огромными возможностями, здесь приведены некоторые лучшие практики, которые следует учитывать при создании модулей, чтобы сохранить производительность приложений и удобство работы разработчиков.

Асинхронные модули

Как мы уже видели, модули Nuxt могут быть асинхронными. Например, вы можете захотеть разработать модуль, который должен получить какой-то API или вызвать асинхронную функцию.

Однако будьте осторожны с асинхронным поведением, поскольку Nuxt будет ждать, пока ваш модуль настроится, прежде чем перейти к следующему модулю и запустить сервер разработки, процесс сборки и т.д. Предпочтите отложить трудоемкую логику на хуки Nuxt.

Всегда присваивайте префикс экспортируемым интерфейсам

Модули Nuxt должны предоставлять явный префикс для любой открытой конфигурации, плагина, API, композабла или компонента, чтобы избежать конфликта с другими модулями и внутренними компонентами.

В идеале, вы должны назначить префикс с именем вашего модуля (например, если ваш модуль называется nuxt-foo, выставляйте <FooButton> и useFooBar(), а не <Button> и useBar()).

Будьте дружелюбны к TypeScript

Nuxt имеет первоклассную интеграцию TypeScript для наилучшего опыта разработчиков.

Раскрытие типов и использование TypeScript для разработки модулей приносит пользу пользователям, даже если они не используют TypeScript напрямую.

Избегайте синтаксиса CommonJS

Nuxt полагается на нативные модули ESM. Пожалуйста, прочитайте про нативные ES-модули для получения дополнительной информации.

Документируйте использование модуля

Рассмотрите возможность документирования использования модуля в файле README:

• Зачем нужен этот модуль?
• Как использовать этот модуль?
• Что делает этот модуль?

Ссылка на сайт интеграции и документацию - всегда хорошая идея.

Предоставьте демо или шаблон StackBlitz

Хорошей практикой является создание минимального примера с вашим модулем и StackBlitz, которую вы добавляете в README вашего модуля.

Это не только даст потенциальным пользователям вашего модуля быстрый и простой способ поэкспериментировать с модулем, но и позволит им создавать минимальные репродукции, которые они смогут присылать вам при возникновении проблем.

Не рекламируйте конкретную версию Nuxt

Nuxt, Nuxt Kit и другие новые инструменты создаются с учетом как будущей, так и обратной совместимости.

Пожалуйста, используйте "X for Nuxt" вместо "X for Nuxt 3", чтобы избежать фрагментации в экосистеме, и предпочитайте использовать meta.compatibility для установки ограничений на версию Nuxt.

Придерживайтесь настроек по умолчанию стартера

Стартовый модуль поставляется с набором инструментов и конфигураций по умолчанию (например, конфигурация ESLint). Если вы планируете открыто распространять свой модуль, придерживайтесь этих настроек по умолчанию, чтобы ваш модуль имел единый стиль кодирования с другими модулями сообщества, что облегчит другим людям внесение вклада.

Экосистема

Экосистема модулей Nuxt представляет собой более 15 миллионов ежемесячных загрузок NPM и обеспечивает расширенный функционал и интеграцию со всеми видами инструментов. Вы можете стать частью этой экосистемы!

Типы модулей

Официальные модули - это модули с префиксом @nuxt/ (например, @nuxt/content). Они создаются и активно поддерживаются командой Nuxt. Как и в случае с фреймворком, вклад сообщества более чем приветствуется, чтобы помочь сделать их лучше!

Модули сообщества - это модули с префиксом @nuxtjs/ (например, @nuxtjs/tailwindcss). Это проверенные модули, созданные и поддерживаемые членами сообщества. Опять же, вклад приветствуется всеми.

Модули от третьего лица и другие модули сообщества - это модули (часто) с префиксом nuxt-. Их может сделать любой желающий, использование этого префикса позволяет обнаружить эти модули на npm. Это лучшая отправная точка для разработки и опробования идеи!

Приватные или личные модули - это модули, созданные для вашего собственного использования или компании. Они не должны следовать каким-либо правилам именования для работы с Nuxt и часто встречаются под организацией npm (например, @my-company/nuxt-auth).

Список модулей сообщества

Любые модули сообщества могут быть включены в список модулей. Чтобы попасть в список, откройте issue в репозитории nuxt/modules. Команда Nuxt поможет вам применить лучшие практики перед включением в список.

Присоединитесь к nuxt-modules и @nuxtjs/

Перенося свои модули в nuxt-modules, вы всегда сможете помочь кому-то другому, и таким образом мы сможем объединить усилия для создания одного идеального решения.

Если у вас есть уже опубликованный и работающий модуль, и вы хотите перенести его в nuxt-modules, откройте issue в nuxt/modules.

Присоединившись к nuxt-modules, мы сможем переименовать ваш модуль в сообществе под областью видимости @nuxtjs/ и предоставить поддомен (например, my-module.nuxtjs.org) для его документации.