{"_path":"/getting-started/usage","_draft":false,"_partial":false,"_empty":false,"title":"Usage","description":"Learn how to use the newsletter module in your Nuxt 3 application.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This module exposes composables and components that are "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/directory-structure/composables","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"auto-imported"}]},{"type":"text","value":" by Nuxt 3."}]},{"type":"element","tag":"h2","props":{"id":"module-registration"},"children":[{"type":"text","value":"Module registration"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-newsletter"}]},{"type":"text","value":" module in your Nuxt application, make sure to register the module with its options in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.ts"}]},{"type":"text","value":" like following:"}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  modules: [\n    'nuxt-newsletter'\n  ],\n  newsletter: {\n    revue: {\n      apiKey: '<REVUE_API_KEY>',\n      component: true\n    }\n  }\n})\n","filename":"nuxt.config.js|ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineNuxtConfig({\n  modules: [\n    'nuxt-newsletter'\n  ],\n  newsletter: {\n    revue: {\n      apiKey: '<REVUE_API_KEY>',\n      component: true\n    }\n  }\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can read about module configuration options "},{"type":"element","tag":"a","props":{"href":"/getting-started/setup#options"},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"h2","props":{"id":"use-newsletterformvue-in-your-app"},"children":[{"type":"text","value":"Use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"NewsletterForm.vue"}]},{"type":"text","value":" in your app"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Right now, you can use the built in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"newsletter-form"}]},{"type":"text","value":" component in your application like following:"}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div>\n    <newsletter-form />\n  </div>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  <div>\n    <newsletter-form />\n  </div>\n</template>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can read more about components in the Components section."}]},{"type":"element","tag":"h2","props":{"id":"usenewslettersubscribe-composable"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useNewsletterSubscribe"}]},{"type":"text","value":" composable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you prefer to create your own newsletter component you can use the built in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useNewsletterSubscribe"}]},{"type":"text","value":" composable to handle adding new email address to subscribers like following:"}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nconst result = await useNewsletterSubscribe(email.value)\n\nconsole.log(result) // Email ${email} added to subscribers\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup>\nconst result = await useNewsletterSubscribe(email.value)\n\nconsole.log(result) // Email ${email} added to subscribers\n</script>\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This module exposes composables and components that are "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/directory-structure/composables","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"auto-imported"}]},{"type":"text","value":" by Nuxt 3."}]},{"type":"element","tag":"h2","props":{"id":"module-registration"},"children":[{"type":"text","value":"Module registration"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-newsletter"}]},{"type":"text","value":" module in your Nuxt application, make sure to register the module with its options in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.ts"}]},{"type":"text","value":" like following:"}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  modules: [\n    'nuxt-newsletter'\n  ],\n  newsletter: {\n    revue: {\n      apiKey: '<REVUE_API_KEY>',\n      component: true\n    }\n  }\n})\n","filename":"nuxt.config.js|ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e6c80"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8e6c80"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dd0bfa"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-238733"},"children":[{"type":"text","value":"modules"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-50170f"},"children":[{"type":"text","value":"'nuxt-newsletter'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"  ],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-238733"},"children":[{"type":"text","value":"newsletter"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-238733"},"children":[{"type":"text","value":"revue"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-238733"},"children":[{"type":"text","value":"apiKey"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-50170f"},"children":[{"type":"text","value":"'<REVUE_API_KEY>'"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-238733"},"children":[{"type":"text","value":"component"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9a1fb3"},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can read about module configuration options "},{"type":"element","tag":"a","props":{"href":"/getting-started/setup#options"},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"h2","props":{"id":"use-newsletterformvue-in-your-app"},"children":[{"type":"text","value":"Use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"NewsletterForm.vue"}]},{"type":"text","value":" in your app"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Right now, you can use the built in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"newsletter-form"}]},{"type":"text","value":" component in your application like following:"}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div>\n    <newsletter-form />\n  </div>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-238733"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-9a1fb3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"class":"ct-9a1fb3"},"children":[{"type":"text","value":"newsletter-form"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"class":"ct-9a1fb3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-238733"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can read more about components in the Components section."}]},{"type":"element","tag":"h2","props":{"id":"usenewslettersubscribe-composable"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useNewsletterSubscribe"}]},{"type":"text","value":" composable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you prefer to create your own newsletter component you can use the built in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useNewsletterSubscribe"}]},{"type":"text","value":" composable to handle adding new email address to subscribers like following:"}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nconst result = await useNewsletterSubscribe(email.value)\n\nconsole.log(result) // Email ${email} added to subscribers\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-238733"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9a1fb3"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e6c80"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53d88b"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8c8aac"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8e6c80"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dd0bfa"},"children":[{"type":"text","value":"useNewsletterSubscribe"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-53d88b"},"children":[{"type":"text","value":"email"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-238733"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-53d88b"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-dd0bfa"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-238733"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-68d433"},"children":[{"type":"text","value":"// Email ${email} added to subscribers"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-238733"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-1952d6"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-68d433{color:#7F848E}.ct-8c8aac{color:#56B6C2}.ct-53d88b{color:#E5C07B}.ct-9a1fb3{color:#D19A66}.ct-50170f{color:#98C379}.ct-238733{color:#E06C75}.ct-dd0bfa{color:#61AFEF}.ct-1952d6{color:#ABB2BF}.ct-8e6c80{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"module-registration","depth":2,"text":"Module registration"},{"id":"use-newsletterformvue-in-your-app","depth":2,"text":"Use NewsletterForm.vue in your app"},{"id":"usenewslettersubscribe-composable","depth":2,"text":"useNewsletterSubscribe composable"}]}},"_type":"markdown","_id":"content:1.getting-started:2.usage.md","_source":"content","_file":"1.getting-started/2.usage.md","_extension":"md"}