[{"_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"},{"_path":"/providers/mailchimp","_draft":false,"_partial":false,"_empty":false,"title":"Mailchimp","description":"Learn more about the Mailchimp provider integration for newsletter module.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Get down to business and grow sales. Engage your customers and boost your business with Mailchimp's advanced, yet easy‑to‑use marketing platform."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can learn more about Mailchimp "},{"type":"element","tag":"a","props":{"href":"https://mailchimp.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to have Mailchimp as your newsletter provider set the provider option in the configuration options of the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-newsletter"}]},{"type":"text","value":" module to 'mailchimp' like following:"}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  modules: [\n    'nuxt-newsletter'\n  ],\n  newsletter: {\n    mailchimp: {\n      apiKey: process.env.MAILCHIMP_API_KEY,\n      serverPrefix: process.env.MAILCHIMP_SERVER_PREFIX,\n      audienceId: process.env.MAILCHIMP_AUDIENCE_ID,\n      component: true // optional\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    mailchimp: {\n      apiKey: process.env.MAILCHIMP_API_KEY,\n      serverPrefix: process.env.MAILCHIMP_SERVER_PREFIX,\n      audienceId: process.env.MAILCHIMP_AUDIENCE_ID,\n      component: true // optional\n    }\n  }\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can then use the built in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"NewsletterForm.vue"}]},{"type":"text","value":" component or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useNewsletterSubscribe"}]},{"type":"text","value":" composable to handle adding new email to subscribers list."}]}]},"_type":"markdown","_id":"content:3.providers:2.mailchimp.md","_source":"content","_file":"3.providers/2.mailchimp.md","_extension":"md"}]