1.1.0 • Published 3 years ago

tweet-feedback v1.1.0

Weekly downloads
4
License
MIT
Repository
github
Last release
3 years ago

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

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.

OptionTypeDefaultDescription
userStringdawntraoztwitter user you want to be mentioned
shareUrlStringdocument.location.hrefurl you want people to share
messageStringI use your package! ThanksMessages you want people to share
classesPrefixStringtweet-feedbackPrefix 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.

SlotDescription
defaultButton content, i.e. text + icon
headerAny content before the twitter button
footerAny 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)

1.1.0

3 years ago

1.0.13

3 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.1.0

4 years ago