Feedback Widget

• ✨  Release Notes

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add pp-feedback-widget

Then, configure it in your nuxt.config.ts:

export default defineNuxtConfig({
  feedbackWidget: {
    apiUrl: process.env.MIDDLEWARE_URL,
    apiPassword: process.env.MIDDLEWARE_PASSWORD,
    apiUser: process.env.MIDDLEWARE_USER,
    feedbackKey: "horizon_festival", // or, define in `app.config.ts` with `siteConfig.feedbackKey` or `siteConfig.collection`
  },
  version: "0.0.0", // TODO: Import version
});

Add the following to your .env file:

MIDDLEWARE_URL="https://example.com"
MIDDLEWARE_USER="*****"
MIDDLEWARE_PASSWORD="********"

That's it! You can now use feedback widget in your Nuxt app ✨

To integrate ClickUp, ask the person managing the middleware to add the value of the feedbackKey to the ClickUp Handler. Following the example above, the feedbackKey value would be "horizon_festival.

Example

src/app.vue

<template lang="pug">
#app
  FeedbackWidget
  //- other components
</template>

Styling

To overwrite the primary theme colour:

.is-feedback-widget {
  --pp-fw-primary: #346A35;
}

To change the positioning of the tag:

<template lang="pug">
  .is-feedback-widget-wrapper
    FeedbackWidget
</template>

<style>
.is-feedback-widget-wrapper > .is-feedback-widget-tag {
/* Prior to v3.0.1: */
/* .is-feedback-widget-wrapper > .print-hidden { */
  @apply top-2/3;
}
</style>

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release