Nuxt 3 앱에 뉴스레터 추가하기

새 가입자 추가는 모든 애플리케이션 유형에 배치할 수 있는 기능입니다. 단순한 포트폴리오 페이지에서 복잡한 전자 상거래 애플리케이션에 이르기까지 뉴스레터에 신규 사용자를 추가하면 많은 가치를 제공할 수 있습니다. 항상 구현하기가 정말 어렵다고 생각했지만 실제로는 오히려 쉽습니다.

이 기사에서는 인기 있는 뉴스레터 제공업체와 쉽게 통합되는 nuxt 모듈을 사용하여 얼마나 쉽게 그렇게 할 수 있는지 보여드리겠습니다.

암호

먼저 Nuxt 3 애플리케이션에서 새 nuxt 모듈nuxt-newsletter을 추가해 보겠습니다.

yarn add nuxt-newsletter

그러면 프로젝트에서 사용할 수 있도록 모듈이 설치됩니다. 그런 다음 nuxt.config.ts 배열의 modules 파일에 모듈을 등록해 보겠습니다.

export default {
  modules: [
    [
      "nuxt-newsletter",
      {
        // Options
      },
    ],
  ],
}

nuxt-newsletter는 Mailchimp, Buttondown 및 Revue와 쉽게 통합됩니다. 이에 대한 자세한 내용은 설명서here를 확인하십시오.

우리의 경우 Revue 통합을 사용하고 싶다고 가정해 보겠습니다. 이를 위해 다음과 같이 구성을 채웁니다.

export default defineNuxtConfig({
  modules: [
    'nuxt-newsletter'
  ],
  newsletter: {
    revue: {
      apiKey: process.env.REVUE_API_KEY,
      component: true // optional
    }
  }
})

그리고 그게 다야! 이제 모듈이 등록되었으며 나중에 사용할 수 있습니다. 지금은 구성요소 또는 컴포저블을 선택하여 모듈 기능을 사용할 수 있습니다.

구성 가능한 접근 방식을 선택하면 구독자 목록에 사용자를 추가하는 기능만 제공됩니다(UI 없음).

다음과 같이 할 수 있습니다.

<script setup>
const result = await useNewsletterSubscribe(email.value)

console.log(result) // Email ${email} added to subscribers
</script>

구성 요소 접근 방식을 선택하는 경우 구성 옵션을 true로 설정해야 합니다. 그런 다음 NewsletterForm 구성 요소를 사용할 수 있습니다.

<template>
  <div>
    <newsletter-form />
  </div>
</template>

귀하의 요구 사항을 가장 잘 충족하도록 쉽게 사용자 정의할 수 있습니다. 모든 사용자 지정 옵션을 확인할 수 있습니다here.

아래에서 NewsletterForm 구성 요소를 사용하는 데 사용할 수 있는 접근 방식을 볼 수 있습니다.

<div>
    <div>
      <h1>Default NewsletterForm.vue component</h1>
      <newsletter-form/>
    </div>
    <div>
      <h1>Styled NewsletterForm.vue component</h1>
      <newsletter-form :theme="{ container: 'newsletter-form', button: 'newsletter-form__button', header: 'newsletter-form__header', input: 'newsletter-form__input' }" />
    </div>
    <div>
      <h1>Customized NewsletterForm.vue component</h1>
      <newsletter-form
        @subscribed="log"
        headerText="Cool Newsletter"
        buttonText="Join in!"
        inputPlaceholder="Your email"
      >
        <template #top>
          <img src="https://github.com/nuxt/framework/raw/main/.github/logo.svg" width="200">
        </template>
        <template #description>
          <p>My Awesome newsletter description</p>
        </template>
        <template #bottom>
          <div>
            <input type="checkbox" id="check">
            <label for="check">Check</label>
          </div>
        </template>
      </newsletter-form>
    </div>
  </div>

그리고 브라우저의 각각의 결과:

요약

잘 했어! Nuxt 3 애플리케이션에 뉴스레터 통합을 방금 추가했습니다. 모듈을 가능한 한 최고로 만들기 위해 노력하고 있으므로 이제부터는 모듈을 가지고 놀면서 몇 가지 새로운 개선 사항을 추천할 수 있습니다. :)