Vue-email-personaliser NPM

vue-email-personaliser

Art for vue-email-personaliser

Vue Web Component for formatting email message based on CSV file content). Sample backend (Laravel package): laravel-personalised-email-sender

The general workflow in using this Vue component is:

Paste details of your email recipients in CSV format (actually, TSV, for now :)). The first row are parsed as header/placeholders
Format the email you wish to send (use {{mustache}} syntax to dynamically inject data from the CSV pasted above. The CSV headers serve as placeholders)
Check the rendered sample email message in the Preview box to be sure your formatted mail looks the way you want it
Specify your backend endpoint that handles the actual sending of the email messages (see sample implementation here. You can actually simply use laravel-personalised-email-sender) as your backend end-point
Specify the index of the column that your endpoint will uniquely use to identify each row
Send it!

Usage

As a web browser drop-in Vue component

The /dist folder contains this package's Vue Web Component built with the --inline-vue flag (see more details in the package.json file). This means that you can immediately start using this package as a Vue component by simply importing it into your web page like below:

<script src='dist/vue-email-personaliser.min.js'></script>

This will provide you with a Vue component as <vue-email-personaliser></vue-email-personaliser>. This component accepts a prop named default-post-endpoint, which you use to specify the endpoint that will do the actual sending out of your email (e.g. as implemented in laravel-personalised-email-sender). The formatted email template will be POSTed to this endpoint.