Newbie: Use npm vssue with HEXO blog

[ghost]

Sorry for newbie question.

I have HEXO blog... https://hexo.io/

I installed npm i vssue --save in my hexo node_modules.

I installed npm install @vssue/api-bitbucket-v2 in my hexo node_modules.

In my article.ejs I added:

<template>
  <Vssue
    :title="title"
    :options="options"
  />
</template>

 <script>
import { VssueComponent } from 'vssue'
import BitbucketV2 from '@vssue/api-bitbucket-v2'
import 'vssue/dist/vssue.css'

export default {
  name: 'VssueDemo',

  components: {
    'Vssue': VssueComponent,
  },

  data () {
    return {
      title: '<%= config.vssue.title %>',
      options: {
        api: BitbucketV2,
        owner: '<%= config.vssue.owner %>',
        repo: '<%= config.vssue.repo %>',
        clientId: '<%= config.vssue.clientId %>',
        clientSecret: '<%= config.vssue.clientSecret %>',
      },
    }
  },
}
</script>

But not working. How to solve? I do not see vssue comment box, nothing, all empty.

[meteorlxy]

The <template> and <script> block syntax is for .vue file, not for .ejs file.

You should learn about the Single File Components of Vue first.

You may also need to learn vue-cli or webpack, and how to integrate them with Hexo.

BTW, if you like Vue, Vuepress could be an alternative of Hexo. In Vuepress, you don't need to config webpack or vue-cli yourself, and you can use .vue file directly. Vssue also provides a plugin of Vuepress.

[meteorlxy]

Close it as it's not an issue of Vssue.

Still feel free to comment if you have any questions.