Nuxt 3 모듈을 요리하는 방법

재료

Nuxt 3 100gr

1숟가락 @nuxt/kit

Nuxt Module Builder 1 L

100톤node_modules

좋은 아이디어 1그릇

1 핀치 Vitest (선택 사항)

준비

1) Nuxt Module Builder 1L를 큰 그릇에 붓는 것으로 시작합니다(터미널을 사용하는 경우에도 작동함).

npx nuxi init -t module my-amazing-recipe

이 간단하지만 매우 중요한 단계를 성공했다면 폴더 구조가 단단하고 촉촉해야 합니다. 아래 이미지와 같아야 합니다. 그렇지 않은 경우 실패한 것이므로 다시 시작해야 합니다.



2) 이제 혼합물이 너무 가벼워지지 않도록 100톤node_modules을 추가할 때입니다. 우리는 정말 크고 두꺼운 것을 원합니다. 트릭을 수행해야 하는 이 명령을 실행합니다.

yarn install # or npm install

3) runtime 폴더는 대부분의 훌륭한 아이디어를 추가할 위치입니다. 권장대로 Nuxt Module Builder에서 재료를 구입했다면 이미 plugin.ts 파일이 들어 있을 것입니다. 거기에 우리의 레시피를 추가합시다.

// ./src/runtime/plugin.ts

import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(nuxtApp => {
   nuxtApp.provide('recipe', 'my-amazing-recipe')
})

4) 자, 이제 이 레시피를 요리에 추가했으므로provided 편리한 방법을 추가해 보겠습니다.

// ./src/runtime/composables/useRecipe/index.ts

/**
 * Use the recipe.
 */
export function useRecipe () {
  const { $recipe } = useNuxtApp()

  return $recipe
}

그러나 TypeScript를 사랑하는 사람들에게는 아마도 any 유형이 전혀 마음에 들지 않을 것입니다. 자, 조금 양념을 해봅시다.

// ./src/runtime/plugin.ts

import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(() => ({
  provide: {
    recipe: 'my-amazing-recipe'
  }
}))

컴포저블로 돌아가 달콤한 스위트string 유형을 즐기세요.

5) 이 시점에서 - 그리고 당신은 훌륭한 요리사이기 때문에 - 당신의 요리가 당신이 원하는 것과 똑같은 맛이 나는지 확인해야 합니다expect. 불행히도, 글을 쓰는 시점에서는 아직 간단하지 않습니다. 나는 우리가 곧 Nuxt 3용으로 훌륭하고 크림 같은@nuxt/test-utils을 준비할 것이라고 확신하지만 고품질 식사를 위해 이미 먹었다고 가정해 보겠습니다.

믹스에 약간vitest을 추가합니다.

yarn add --dev vitest

즉시 약간의 테스트를 추가하십시오.

// ./src/runtime/composables/useRecipe/index.test.ts

import { describe, it, expect } from 'vitest'
import { useRecipe } from '.'

describe('useRecipe', () => {
  it('should show my recipe', () => {
    expect(useRecipe()).toBe('my-amazing-recipe')
  })
})

이 명령을 실행하고 비참하게 실패하도록 내버려 두십시오(현재로서는).

yarn vitest

6) 자, 거의 다 끝났습니다. 혼합물을 오븐에 넣기 전 마지막 단계는 작은useRecipe 컴포저블이 모든 구성 요소에 고르게 확장되도록 하는 것입니다. 기술적인 요리 용어는 auto-importing 입니다. 그러나 어떤 사람들은 더 많은 맛을 원하는 곳을 선택할 수 있을 때 더 좋아하므로 선택 사항으로 합시다.

// ./src/module.ts
import { resolve } from 'path'
import { fileURLToPath } from 'url'
import { defineNuxtModule, addPlugin, addAutoImportDir } from '@nuxt/kit'

export interface ModuleOptions {
  addPlugin: boolean;
  autoImport: boolean; // Add some type for your option.
}

export default defineNuxtModule<ModuleOptions>({
  ...,
  defaults: {
    addPlugin: true,
    autoImport: true // Set the default option to true.
  },
  setup (options, nuxt) {
    if (options.addPlugin) {
      const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
      nuxt.options.build.transpile.push(runtimeDir)
      addPlugin(resolve(runtimeDir, 'plugin'))

      if (options.autoImport) {
        // Use that magic helper to auto-import your composables.
        addAutoImportDir(resolve(runtimeDir, 'composables'))
      }
    }
  }
})

7) 좋습니다. 준비가 다 된 것 같습니다. 오븐에 넣어봅시다.

// ./playground/app.vue
<script setup>
const { $recipe } = useNuxtApp()
</script>

<template>
  <div>
    {{ $recipe }}
  </div>
</template>

Vite를 실행 중이고 속도가 너무 빠르기 때문에 yarn dev 몇 초 동안 실행하여 180°C로 설정하겠습니다.

8) http://localhost:3000로 가서 우리의 레시피가 my-amazing-recipe만큼 놀라운지 봅시다.

9) 당신은 요리를 아주 잘해요. 🎉