ConvertKit Vue

Easily plug convertkit forms to your Vue websites.

Using React? Try ConvertKit-React

For Vue 3:

yarn add convertkit-vue@next

For Vue 2:

yarn add convertkit-vue

• Using different templates

• Using different templates

<template>
  <ConvertKitForm formId={1234567} />
</template>

<script>
import ConvertKitForm from 'convertkit-vue'

export default {
  name: "My Vue App",
  components: { ConvertKitForm }
}
</script>

To get your form id, go to the form you have created on convertkit and choose the HTML embed option.

Here you'll pick out your form id from the form action in the embed code:

<template>
  <ConvertKitForm v-bind="config" />
</template>
<script>
import ConvertKitForm from 'convertkit-vue'

export default {
  name: "My Vue App",
  components: { ConvertKitForm },
  data() {
    return {
      config: {
        formId: 1234567,
        template: 'mills',
        emailPlaceholder: 'Enter an email address',
        submitText: 'Sign up'
      }
    }
  }
}
</script>

The minimal template has no preconfigured styling, leaving you options to style as desired. To get a preconfigured style, use one of the app templates (clare, mills, rainier, powell etc) as seen on the app.

To change the subheader (sometimes referred to as content) you may just add children inside the <ConvertkitForm> component like below:

<ConvertKitForm>
  <p>Subscribe to get our latest content by email.</p>
</ConvertKitForm>

To publish a package:

./publish X.X.X "Message about version"

where X.X.X is the version number.