Vue needs to know that crow-comments is a custom element, not a Vue component. After that it is one tag in your template.
Sign in to Crowment, create a comment widget for your site's domain and copy its app key from Install & Embed.
export default defineNuxtConfig({
app: {
head: {
script: [{ src: 'https://embeds.crowment.com/comments.js', defer: true }],
},
},
vue: {
compilerOptions: {
isCustomElement: tag => tag === 'crow-comments',
},
},
})
For a Vue app built with Vite, set the same option on the Vue plugin and add the script tag to index.html:
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: tag => tag === 'crow-comments',
},
},
}),
],
}
<template>
<article>
<!-- your post -->
</article>
<crow-comments app-key="YOUR_APP_KEY" />
</template>
The widget follows Vue Router navigation by itself and loads the new page's thread. Bind attributes as usual, for example :page-id="post.id" or :sso-token="token"; it reacts when they change.