vue-tweet-feedback

Twitter feedback message button linked to your account ❤ Add it to your blog posts on Nuxt.js / Vue app

CodeSandbox Demo

• Install
• Nuxt
• Use
• Options
• Setup
• Author
• License

Install

Using npm run

npm i tweet-feedback

https://www.npmjs.com/package/tweet-feedback

Use

You need to import the component. To do it you need:

import 'tweet-feedback'

// In case you want to add the css
import 'tweet-feedback/dist/vue-tweet-feedback.css'

You can directly use it in your template, add the feedback button:

<VueTweetFeedback
    user="dawntraoz"
    shareUrl="https://dawntraoz.com/"
    message="I read your post"
  >
  <template slot="header">If you want to send me your feedback,</template>

  Give me your feedback <!-- + Icon -->

  <template slot="footer">Thank you! It will help me a lot 🙌</template>
</VueTweetFeedback>

Nuxt

How to add it in Nuxt.js. Add tweet-feedback.js with the content below in your plugins folder.

import 'tweet-feedback'
import 'tweet-feedback/dist/vue-tweet-feedback.css'

In your nuxt config file add the plugin as mode client:

plugins: [
  { src: '~plugins/tweet-feedback.js', mode: 'client' }
]

Use it in your template with the client-only tag

<client-only>
  <VueTweetFeedback
    user="dawntraoz"
    shareUrl="https://dawntraoz.com/"
    message="I read your post"
  >
    <template slot="header">If you want to send me your feedback,</template>

    Give me your feedback <!-- + Icon -->

    <template slot="footer">Thank you! It will help me a lot 🙌</template>
  </VueTweetFeedback>
</client-only>

Options

Here you can see the options available to create your own feedback.

Option	Type	Default	Description
user	String	dawntraoz	twitter user you want to be mentioned
shareUrl	String	document.location.href	url you want people to share
message	String	I use your package! Thanks	Messages you want people to share
classesPrefix	String	tweet-feedback	Prefix used as a class on the parent and as classPrefix__button on the Twitter button

Slots

Here you can see the slots availables to add your content.

Slot	Description
default	Button content, i.e. text + icon
header	Any content before the twitter button
footer	Any content after the twitter button

Setup

Project set up on development

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Author

This component was developed by Dawntraoz for a personal project and published to Open Source. The idea came from Danywalls I hope it helps someone 😊

License

The MIT License (MIT)