[null,{"_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"}]}]}]}]},"_type":"markdown","_id":"content:1.getting-started:2.usage.md","_source":"content","_file":"1.getting-started/2.usage.md","_extension":"md"}]