npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nexment-vue

v0.0.145

Published

A feature-rich serverless comment library based on LeanCloud

Downloads

5

Readme

Nexment-Vue

A feature-rich serverless comment library based on LeanCloud

nexment_banner

See also

Docs

Visit Nexment documentation site at https://nexment.ouorz.com

Demo

Visit Nexment demo site at https://nexment-vue-demo.ouorz.com

Use Nexment in Vue.js projects

Nexment is available for both React.js and Vue.js projects.

Part I - LeanCloud

  1. Register / Login LeanCloud
  2. Create an App in Dashboard
  3. Go to Your App => LeanStorage tab => Objects
  4. Create a class named "test" using default settings
  5. Go to Your App => Settings tab => App keys
  6. Copy AppID and AppKey
  7. Configure REST API Server URL. For configuration instructions, see How to Specify API Server URL (Chinese)
  8. Go to Your App => Settings tab => Security and add your project domain to Web secure domains

Part II - Nexment

Add Nexment to your project dependencies using Yarn:

yarn add nexment-vue

or using NPM:

npm install nexment-vue

Use Nexment in your project:

Import nexment library and stylesheet:

import NexmentContainer from "nexment-vue";
import "nexment-vue/dist/nexment-vue.css";
Vue.use(NexmentContainer);

Setup nexment configuration:

const config = {
  pageKey: 'xxx' | undefined;
  enableLinkInput: true | false | undefined,
  enableReplyListModal: true | false | undefined,
  leancloud: {
    appId: 'xxx',
    appKey: 'xxx',
    serverURL: 'https://xxx.xxx',
  },
  admin: {
    name: 'xxx',
    email: '[email protected]',
  },
};

Use the nexment component:

<NexmentContainer :config="config" />

Use Nexment-Vue in Nuxt.js

Add Nexment to your project dependencies using Yarn:

yarn add nexment-vue

or using NPM:

npm install nexment-vue

Create a plugin(src/plugins/nexment.js):

import Vue from 'vue'
import NexmentContainer from 'nexment-vue'
import 'nexment-vue/dist/nexment-vue.css'
Vue.use(NexmentContainer)

Add this plugin to your Nuxt.js configuration(nuxt.config.js):

module.exports = {
  plugins: [{
      src: '@/plugins/nexment.ts',
      ssr: false,
      mode: 'client'
    }]
}

Setup nexment configuration:

const config = {
  pageKey: 'xxx' | undefined;
  enableLinkInput: true | false | undefined,
  enableReplyListModal: true | false | undefined,
  leancloud: {
    appId: 'xxx',
    appKey: 'xxx',
    serverURL: 'https://xxx.xxx',
  },
  admin: {
    name: 'xxx',
    email: '[email protected]',
  },
};

Use the nexment component:

<NexmentContainer :config="config" />

Use Nexment in Browsers

Nexment can be used as a web component in browsers. That means it can work without a Vue.js instance. Follow the following steps to set it up:

Add Nexment stylesheet to your <head> through CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nexment-vue/dist/nexment-vue.css">

Add Nexment main file through CDN:

<script src="https://cdn.jsdelivr.net/npm/nexment-vue/dist-wc/nexment-vue.min.js"></script>

Use Nexment component in your page(pagekey is optional):

<nexment-container
  email="xxx"
  name="xxx"
  serverurl="xxx"
  appkey="xxx"
  appid="xxx"
  pagekey="xxx"
  enablelinkinput="xxx"
  enableReplyListModal="xxx"
></nexment-container>

See Nexment web component demo here: https://github.com/HelipengTony/nexment-vue/blob/master/index.html

TypeScript Support

Currently type-checking is not supported, please add the following declaration to any .d.ts file in your project:

declare module 'nexment-vue'

Todo

  1. 管理模式
    1. [ ] 评论精选
    2. [ ] 评论 Label

Donation

Your name will be on the list Donation

Donate

File an issue if you encountered any problem I will reply you as soon as possible