[{"_path":"/getting-started/setup","_draft":false,"_partial":false,"_empty":false,"title":"Setup","description":"Learn how to setup newsletter module in your Nuxt 3 application.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out the "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/directory-structure/nuxt.config#buildmodules","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt 3 documentation"}]},{"type":"text","value":" for more information about installing and using modules."}]},{"type":"element","tag":"h2","props":{"id":"installation"},"children":[{"type":"text","value":"Installation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-newsletter"}]},{"type":"text","value":" dependency to your project:"}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"yarn add nuxt-newsletter\n","filename":"yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add nuxt-newsletter\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"npm install nuxt-newsletter --save\n","filename":"NPM","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install nuxt-newsletter --save\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-newsletter"}]},{"type":"text","value":" to the "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/api/configuration/nuxt.config#modules","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modules"}]}]},{"type":"text","value":" section of your Nuxt configuration:"}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  modules: [\n    [\n      \"nuxt-newsletter\",\n      {\n        // Options\n      },\n    ],\n  ],\n  // Or\n  newsletter: {\n    // Options\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    [\n      \"nuxt-newsletter\",\n      {\n        // Options\n      },\n    ],\n  ],\n  // Or\n  newsletter: {\n    // Options\n  },\n});\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"options"},"children":[{"type":"text","value":"Options"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Defaults:"}]},{"type":"element","tag":"code","props":{"code":"{\n  <NEWSLETTER_PROVIDER>: {\n    apiKey: process.env.BUTTONDOWN_API_KEY,\n    component: true\n  },\n}\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n  <NEWSLETTER_PROVIDER>: {\n    apiKey: process.env.BUTTONDOWN_API_KEY,\n    component: true\n  },\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"apikey"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"apiKey"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"API Key that will allow the module to communicate with the newsletter API"}]},{"type":"element","tag":"h3","props":{"id":"component"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"component"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If set to true, it will automatically import the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"NewsletterForm.vue"}]},{"type":"text","value":" component."}]}]},"_type":"markdown","_id":"content:1.getting-started:1.setup.md","_source":"content","_file":"1.getting-started/1.setup.md","_extension":"md"},{"_path":"/components/newsletter-form","_draft":false,"_partial":false,"_empty":false,"title":"NewsletterForm","description":"Learn more about the NewsletterForm component for newsletter module.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component can be serve as the form with newsletter input and button to submit the mail to the newsletter provider."}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NewsletterForm.vue component accepts several props and slots to allow you to customize it to better fit your needs."}]},{"type":"element","tag":"code","props":{"code":"<newsletter-form\n  @subscribed=\"log\"\n  headerText=\"Cool Newsletter\"\n  buttonText=\"Join in!\"\n  inputPlaceholder=\"Your email\"\n>\n  <template #description>\n    <p>My Newsletter Description</p>\n  </template>\n  <template #button-icon>\n    <!-- icon component -->\n  </template>\n</newsletter-form>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<newsletter-form\n  @subscribed=\"log\"\n  headerText=\"Cool Newsletter\"\n  buttonText=\"Join in!\"\n  inputPlaceholder=\"Your email\"\n>\n  <template #description>\n    <p>My Newsletter Description</p>\n  </template>\n  <template #button-icon>\n    <!-- icon component -->\n  </template>\n</newsletter-form>\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"props"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NewsletterForm component accepts following props:"}]},{"type":"element","tag":"h3","props":{"id":"headertext"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"headerText"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Cool Newsletter"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that will be placed in the newsletter header."}]},{"type":"element","tag":"h3","props":{"id":"buttontext"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"buttonText"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Join in!"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that will be placed in the newsletter submit button."}]},{"type":"element","tag":"h3","props":{"id":"inputplaceholder"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inputPlaceholder"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Your email"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that will be placed in the newsletter input placeholder."}]},{"type":"element","tag":"h3","props":{"id":"theme"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"theme"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{ button: '', input: '', header: '', container: ''}"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Styling that will be passed to the component. Can by Tailwind class names or regular CSS styling using class names."}]},{"type":"element","tag":"h2","props":{"id":"events"},"children":[{"type":"text","value":"Events"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NewsletterForm emits following event:"}]},{"type":"element","tag":"h3","props":{"id":"subscribed"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"subscribed"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Event that is fired after submiting a newsletter form."}]},{"type":"element","tag":"h2","props":{"id":"slots"},"children":[{"type":"text","value":"Slots"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NewsletterForm has following slots:"}]},{"type":"element","tag":"h3","props":{"id":"description"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"description"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that will be placed below header and above the input and button."}]},{"type":"element","tag":"h3","props":{"id":"button-icon"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"button-icon"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content that will be placed in the button after the text."}]},{"type":"element","tag":"h3","props":{"id":"top"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content that will be placed above the newsletter header."}]},{"type":"element","tag":"h3","props":{"id":"bottom"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bottom"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content that will be placed below the newsletter input and button"}]},{"type":"element","tag":"h2","props":{"id":"styling"},"children":[{"type":"text","value":"Styling"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can style the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"NewsletterForm.vue"}]},{"type":"text","value":" component using normal CSS styling by using classes or by using TailwindCSS classes like following:"}]},{"type":"element","tag":"code","props":{"code":"<newsletter-form :theme=\"{ container: 'my-css-class', button: 'py-4' }/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<newsletter-form :theme=\"{ container: 'my-css-class', button: 'py-4' }/>\n"}]}]}]},{"type":"element","tag":"code","props":{"code":".my-css-class {\n  background-color: red;\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".my-css-class {\n  background-color: red;\n}\n"}]}]}]}]},"_type":"markdown","_id":"content:2.components:1.newsletter-form.md","_source":"content","_file":"2.components/1.newsletter-form.md","_extension":"md"}]