Newman's Personal Motorcade

    utterances-vue-component
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    hero image

    utterances-vue-component

    Type safety vue component for utterances

    test GitHub release npm download

    GitHub (Pre-)Release Date dependencies Status codecov Codacy Badge npm type definitions Commitizen friendly Gitmoji semantic-release License: MIT FOSSA Status


    Vue component for utterances 🔮

    Utterances is a lightweight comments widget built on GitHub issues, for blog comments, wiki pages and more.

    Features

    • 📚 Pure TypeScript and TSX and provides type definition
    • 🌎 Multiple modules, providing ES modules and Commonjs
    • 📦 Optimized, super slim size

    Quick view

    Locally

    Local import of components is recommended. This is a type-safe props.

    <template>
      <Utterances
        repo="TomokiMiyauci/utterances-component"
        theme="github-dark"
        issueTerm="pathname"
      />
    </template>
    
    <script setup lang="ts">
      import { Utterances } from 'utterances-vue-component'
    </script>

    Globally

    You can also register a component globally. There will be no more type inference for props. If there is no reason to do so, local import is recommended.

    import { createApp } from 'vue'
    import App from './App.vue'
    import { plugin } from 'utterances-vue-component'
    
    createApp(App).use(plugin).mount('#app')
    <template>
      <Utterances
        repo="TomokiMiyauci/me"
        issue-term="pathname"
        theme="github-light"
      />
    </template>

    💫 Install

    📦 Node.js

    npm i utterances-vue-component
    or
    yarn add utterances-vue-component

    🌐 Browser

    The module that bundles the dependencies is obtained from skypack.

    import like this:

    import { Utterances } from 'https://cdn.skypack.dev/utterances-vue-component'

    peerDependency

    package version
    vue ^3.0.0

    📝 API

    Props

    It has a strict type definition. No default value is set to respect the original behavior.

    Official document

    Name Type Description
    repo ${String}/${String} Repository for Utterances to connect to. Expected value: username/repo
    theme Theme The Utterance theme.
    label string? Choose the label that will be assigned to issues created by Utterances.
    issueTerm Term | string[]1 The mapping between blog posts and GitHub issues. One of them2
    issueNumber number You configure Utterances to load a specific issue by number. Issues are not automatically created.

    declare type Theme =
      | 'github-light'
      | 'github-dark'
      | 'preferred-color-scheme'
      | 'github-dark-orange'
      | 'icy-dark'
      | 'dark-blue'
      | 'photon-dark'
      | 'boxy-light'
    declare type Term = 'pathname' | 'url' | 'title' | 'og:title'
    1

    If you chose "Issue title contains specific term", specify the specific term as string array.

    2

    Unfortunately, props in vue cannot be exclusively defined. You can specify either an issueTerm or an issueNumber.

    🤝 Contributing

    Contributions, issues and feature requests are welcome!
    Feel free to check issues.

    🌱 Show your support

    Give a ⭐️ if this project helped you!

    💡 License

    Copyright © 2021-present TomokiMiyauci.

    Released under the MIT license

    FOSSA Status

    Install

    npm i utterances-vue-component

    DownloadsWeekly Downloads

    6

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • miyauci