These examples use Vue to generate an invoice PDF via Anvil's HTML to PDF API. You can use this as a jumping off point to generate a PDF with your own custom Vue components.

This app uses the Options API component style. Use this if you do not use Vue's single-file components. This does not process any CSS, so CSS will need to be provided manually.

This app uses Vue's single-file components (SFC) and uses their compiled CSS automatically.

NOTE: Vue's scoped styles (<style scoped>) are currently not supported with the Anvil PDF generation endpoint. Please consider using other combinations of selectors for your styles.

Same as the full-sfc-support app, however, it is a Vue-port of our React invoice example.

Example output:

Whichever app you choose the usage is the same:

Install the dependencies:

npm install
# or
yarn install

Run the generate command:

ANVIL_API_KEY=YOUR_API_KEY npm run generate && open output.pdf
# or 
ANVIL_API_KEY=YOUR_API_KEY yarn generate && open output.pdf