모듈 작성자 가이드

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가 준비되었습니다')
  })
}

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule((options, nuxt) => {
  nuxt.hook('pages:extend', pages => {
    console.log(`발견된 페이지 수: ${pages.length}`)
  })
})

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    // 보통 모듈의 npm 패키지 이름
    name: '@nuxtjs/example',
    // `nuxt.config`에서 모듈 옵션을 담는 키
    configKey: 'sample',
    // 호환성 제약
    compatibility: {
      // 지원하는 nuxt 버전의 semver
      nuxt: '>=3.0.0'
    }
  },
  // 모듈의 기본 설정 옵션, 함수로 반환할 수도 있음
  defaults: {},
  // Nuxt 훅을 등록하는 단축 문법
  hooks: {},
  // 모듈 로직을 담는 함수, 비동기일 수 있음
  setup(moduleOptions, nuxt) {
    // ...
  }
})

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    // 아직 `experimental` 객체가 없으면 생성합니다
    nuxt.options.experimental ||= {}
    nuxt.options.experimental.componentIslands = true
  }
})

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

const options = useRuntimeConfig().public.myModule

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

export default defineNuxtModule({
  setup (options, nuxt) {
    // 상대 경로 해석을 위한 리졸버 생성
    const resolver = createResolver(import.meta.url)

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

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

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

    // 런타임 디렉토리에서
    addComponent({
      name: 'MySuperComponent', // vue 템플릿에서 사용할 컴포넌트 이름
      export: 'MySuperComponent', // (선택) 컴포넌트가 named export일 경우
      filePath: resolver.resolve('runtime/components/MySuperComponent.vue')
    })

    // 라이브러리에서
    addComponent({
      name: 'MyAwesomeComponent', // vue 템플릿에서 사용할 컴포넌트 이름
      export: 'MyAwesomeComponent', // (선택) 컴포넌트가 named export일 경우
      filePath: '@vue/awesome-components'
    })
  }
})

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

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

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

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

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

    addImports({
      name: 'useComposable', // 사용할 composable 이름
      as: 'useComposable',
      from: resolver.resolve('runtime/composables/useComposable') // composable 경로
    })
  }
})

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

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

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

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

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

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

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

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

    // Tailwind 지시문이 포함된 CSS 파일을 주입할 수 있습니다
    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}')
          ]
        }
      }
    })
  }
})

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

export default defineNuxtModule({
  // `hooks` 맵을 통해 `app:error` 훅에 연결
  hooks: {
    'app:error': (err) => {
      console.info(`이 오류가 발생했습니다: ${err}`);
    }
  },
  setup (options, nuxt) {
    // 프로그래밍 방식으로 `pages:extend` 훅에 연결
    nuxt.hook('pages:extend', (pages) => {
      console.info(`발견된 페이지 수: ${pages.length}`);
    })
  }
})

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

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

export default defineNuxtModule({
  setup (options, nuxt) {
    // 파일이 Nitro의 가상 파일 시스템에 추가되며, 서버 코드에서 'my-server-module.mjs'로 임포트할 수 있습니다
    addServerTemplate({
      filename: 'my-server-module.mjs',
      getContents: () => 'export const myServerModule = () => "hello world !"'
    })
  }
})

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

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

const template = addTemplate({ /* 템플릿 옵션 */ })
nuxt.hook('prepare:types', ({ references }) => {
  references.push({ path: template.dst })
})

nuxt.hook('builder:watch', async (event, path) => {
  if (path.includes('my-module-feature.config')) {
    // 등록한 템플릿을 다시 로드합니다
    updateTemplates({ filter: t => t.filename === 'my-module-feature.mjs' })
  }
})