1.0.0 • Public • Published


A plugin widget to generate citation files (.ris, .bib, .enw).


Installation & Usage


CiteThis can be installed from NPM yarn add cite-this


Vue Component Plugin

To use the citation plugin in your vue apps, import the plugin and install it with Vue.use

import CiteThisVueComponent from '../src/CiteThisVueComponent';

Static Citation Widget

include 'cite-this.js' in your html document <script type=text/javascript src=../cite-this.js></script> or import into your package javascript import 'cite-this';

Add citation widgets to your html by creating elements with the class cite-this e.g:

<div class="cite-this"
    label="CITE THIS"
    author="Example Author"
    title="Example Document"

MULTIPLE ELEMENT SUPPORT Multiple widgets can be added to the same page, by creating multiple html fragments as above. However in this case, the anchor element must each have a unique ID in addition to the cite-this class.


Resource types

The type of resource being referenced must be specified in the type attribute. The


<div class="cite-this"

The currently supported types are:

Type Description
ARTICLE An article from a journal or magazine.
BOOK A book with an explicit publisher.
MISC For use when nothing else fits.
REPORT A report published by a school or other institution, usually numbered within a series.
Field types

Fields can be added to a citation by adding attribute/value pairs to the markup. e.g.

<div class="cite-this"
    author="Example Author"
    title="Example Document

The following attribute types are currently supported:

Type Description
address Publisher's address
author The name(s) of the author(s)
editor The name(s) of the editor(s)
institution The institution that was involved in the publishing, but not necessarily the publisher
journal The journal or magazine the work was published in
month The month of publication (or, if unpublished, the month of creation)
number The "(issue) number" of a journal, magazine, or report, if applicable.
pages Page numbers
publisher The publisher's name
series The series of books the book was published in
title The title of the work
url The URL of the resource
volume The volume of a journal or multi-volume book
year The year of publication (or, if unpublished, the year of creation)

Note: Some resource types specify required fields for particular file types. Validating that required fields are specified is currently not supported by the plugin. See 'Reference documentation' for details.

Customising button text

Custom button text can be added by including

label="CITE THIS"

as an attribute on the static widget or binding

:label="'CITE THIS'"

on the Vue component


Reference documentation


  • install dependencies: yarn

  • development build: yarn build or yarn watch

  • run linters: yarn lint

  • build for production with minification and view bundle analyzer report: yarn package

  • push dist/demo sub folder to github pages branch: yarn deploy:demo


Running locally

  1. Build by running yarn build oryarn watch
  2. Open cite-this/dist/demo/index.html in a browser

Demo build

  1. Build yarn package
  2. Commit changes git commit -am"V X.Y.Z"
  3. Push to gh-pages branch yarn deploy:demo
  4. Update version number in package.json and push to master

Production build

  1. Build yarn package
  2. Update version number in package.json
  3. Commit changes git commit -am"V X.Y.Z"
  4. Deploy to npm npm publish
  5. Update version number in package.json and push to master

Code Style

There are linters set up to enforce code style, run with yarn lint.


JavaScript unit tests are implemented with Jest and vue-test-utils The specs are located in test/unit/specs and can be run with yarn test Test coverage can be reported by running yarn test:coverage

Enhancement Backlog

VUE best practice


  • Flyout style picker
  • Add easily overridable default styling
  • Customisable button label
  • Check accessibility
  • Tweak flyout animation


  • (Higher Priority) Add support for all required types and fields - IN PROGRESS
  • Support multiple elements per page
  • Build for Vue component use
  • Build and deploy
  • Validate required fields for type.

Tidy up:

  • Test coverage
  • Hidden link for downloads (is there a nicer way to do this that won't require timeout)
  • Compile styles with sass or postcss then tidy up, add stylelint
  • Standardise error messages console.error vs throwing error




Package Sidebar


npm i cite-this

Weekly Downloads






Unpacked Size

3.24 MB

Total Files


Last publish


  • jesschampion