[{"data":1,"prerenderedAt":510},["ShallowReactive",2],{"\u002Fintegrations\u002Fnuxt":3},{"id":4,"title":5,"body":6,"description":502,"extension":503,"icon":504,"meta":505,"navigation":267,"path":506,"seo":507,"stem":508,"__hash__":509},"integrations\u002Fintegrations\u002Fnuxt.md","Add comments to a Nuxt or Vue site",{"type":7,"value":8,"toc":496},"minimark",[9,18,453,464,469,492],[10,11,12,13,17],"p",{},"Vue needs to know that ",[14,15,16],"code",{},"crow-comments"," is a custom element, not a Vue component. After that it is one tag in your template.",[19,20,22,27,40,44,232,238,370,374],"steps",{"level":21},"3",[23,24,26],"h3",{"id":25},"create-a-widget","Create a widget",[10,28,29,34,35,39],{},[30,31,33],"a",{"href":32},"\u002Flogin","Sign in to Crowment",", create a comment widget for your site's domain and copy its app key from ",[36,37,38],"strong",{},"Install & Embed",".",[23,41,43],{"id":42},"configure-nuxt","Configure Nuxt",[45,46,52],"pre",{"className":47,"code":48,"filename":49,"language":50,"meta":51,"style":51},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  app: {\n    head: {\n      script: [{ src: 'https:\u002F\u002Fembeds.crowment.com\u002Fcomments.js', defer: true }],\n    },\n  },\n  vue: {\n    compilerOptions: {\n      isCustomElement: tag => tag === 'crow-comments',\n    },\n  },\n})\n","nuxt.config.ts","ts","",[14,53,54,78,91,101,151,157,163,173,183,213,218,223],{"__ignoreMap":51},[55,56,59,63,66,70,74],"span",{"class":57,"line":58},"line",1,[55,60,62],{"class":61},"s7zQu","export",[55,64,65],{"class":61}," default",[55,67,69],{"class":68},"s2Zo4"," defineNuxtConfig",[55,71,73],{"class":72},"sTEyZ","(",[55,75,77],{"class":76},"sMK4o","{\n",[55,79,81,85,88],{"class":57,"line":80},2,[55,82,84],{"class":83},"swJcz","  app",[55,86,87],{"class":76},":",[55,89,90],{"class":76}," {\n",[55,92,94,97,99],{"class":57,"line":93},3,[55,95,96],{"class":83},"    head",[55,98,87],{"class":76},[55,100,90],{"class":76},[55,102,104,107,109,112,115,118,120,123,127,130,133,136,138,142,145,148],{"class":57,"line":103},4,[55,105,106],{"class":83},"      script",[55,108,87],{"class":76},[55,110,111],{"class":72}," [",[55,113,114],{"class":76},"{",[55,116,117],{"class":83}," src",[55,119,87],{"class":76},[55,121,122],{"class":76}," '",[55,124,126],{"class":125},"sfazB","https:\u002F\u002Fembeds.crowment.com\u002Fcomments.js",[55,128,129],{"class":76},"'",[55,131,132],{"class":76},",",[55,134,135],{"class":83}," defer",[55,137,87],{"class":76},[55,139,141],{"class":140},"sfNiH"," true",[55,143,144],{"class":76}," }",[55,146,147],{"class":72},"]",[55,149,150],{"class":76},",\n",[55,152,154],{"class":57,"line":153},5,[55,155,156],{"class":76},"    },\n",[55,158,160],{"class":57,"line":159},6,[55,161,162],{"class":76},"  },\n",[55,164,166,169,171],{"class":57,"line":165},7,[55,167,168],{"class":83},"  vue",[55,170,87],{"class":76},[55,172,90],{"class":76},[55,174,176,179,181],{"class":57,"line":175},8,[55,177,178],{"class":83},"    compilerOptions",[55,180,87],{"class":76},[55,182,90],{"class":76},[55,184,186,189,191,195,199,202,205,207,209,211],{"class":57,"line":185},9,[55,187,188],{"class":68},"      isCustomElement",[55,190,87],{"class":76},[55,192,194],{"class":193},"sHdIc"," tag",[55,196,198],{"class":197},"spNyl"," =>",[55,200,201],{"class":72}," tag ",[55,203,204],{"class":76},"===",[55,206,122],{"class":76},[55,208,16],{"class":125},[55,210,129],{"class":76},[55,212,150],{"class":76},[55,214,216],{"class":57,"line":215},10,[55,217,156],{"class":76},[55,219,221],{"class":57,"line":220},11,[55,222,162],{"class":76},[55,224,226,229],{"class":57,"line":225},12,[55,227,228],{"class":76},"}",[55,230,231],{"class":72},")\n",[10,233,234,235,87],{},"For a Vue app built with Vite, set the same option on the Vue plugin and add the script tag to ",[14,236,237],{},"index.html",[45,239,242],{"className":47,"code":240,"filename":241,"language":50,"meta":51,"style":51},"import vue from '@vitejs\u002Fplugin-vue'\n\nexport default {\n  plugins: [\n    vue({\n      template: {\n        compilerOptions: {\n          isCustomElement: tag => tag === 'crow-comments',\n        },\n      },\n    }),\n  ],\n}\n","vite.config.ts",[14,243,244,263,269,277,287,296,305,314,337,342,347,357,364],{"__ignoreMap":51},[55,245,246,249,252,255,257,260],{"class":57,"line":58},[55,247,248],{"class":61},"import",[55,250,251],{"class":72}," vue ",[55,253,254],{"class":61},"from",[55,256,122],{"class":76},[55,258,259],{"class":125},"@vitejs\u002Fplugin-vue",[55,261,262],{"class":76},"'\n",[55,264,265],{"class":57,"line":80},[55,266,268],{"emptyLinePlaceholder":267},true,"\n",[55,270,271,273,275],{"class":57,"line":93},[55,272,62],{"class":61},[55,274,65],{"class":61},[55,276,90],{"class":76},[55,278,279,282,284],{"class":57,"line":103},[55,280,281],{"class":83},"  plugins",[55,283,87],{"class":76},[55,285,286],{"class":72}," [\n",[55,288,289,292,294],{"class":57,"line":153},[55,290,291],{"class":68},"    vue",[55,293,73],{"class":72},[55,295,77],{"class":76},[55,297,298,301,303],{"class":57,"line":159},[55,299,300],{"class":83},"      template",[55,302,87],{"class":76},[55,304,90],{"class":76},[55,306,307,310,312],{"class":57,"line":165},[55,308,309],{"class":83},"        compilerOptions",[55,311,87],{"class":76},[55,313,90],{"class":76},[55,315,316,319,321,323,325,327,329,331,333,335],{"class":57,"line":175},[55,317,318],{"class":68},"          isCustomElement",[55,320,87],{"class":76},[55,322,194],{"class":193},[55,324,198],{"class":197},[55,326,201],{"class":72},[55,328,204],{"class":76},[55,330,122],{"class":76},[55,332,16],{"class":125},[55,334,129],{"class":76},[55,336,150],{"class":76},[55,338,339],{"class":57,"line":185},[55,340,341],{"class":76},"        },\n",[55,343,344],{"class":57,"line":215},[55,345,346],{"class":76},"      },\n",[55,348,349,352,355],{"class":57,"line":220},[55,350,351],{"class":76},"    }",[55,353,354],{"class":72},")",[55,356,150],{"class":76},[55,358,359,362],{"class":57,"line":225},[55,360,361],{"class":72},"  ]",[55,363,150],{"class":76},[55,365,367],{"class":57,"line":366},13,[55,368,369],{"class":76},"}\n",[23,371,373],{"id":372},"add-the-comment-section","Add the comment section",[45,375,379],{"className":376,"code":377,"language":378,"meta":51,"style":51},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Carticle>\n    \u003C!-- your post -->\n  \u003C\u002Farticle>\n\n  \u003Ccrow-comments app-key=\"YOUR_APP_KEY\" \u002F>\n\u003C\u002Ftemplate>\n","html",[14,380,381,392,402,408,417,421,444],{"__ignoreMap":51},[55,382,383,386,389],{"class":57,"line":58},[55,384,385],{"class":76},"\u003C",[55,387,388],{"class":83},"template",[55,390,391],{"class":76},">\n",[55,393,394,397,400],{"class":57,"line":80},[55,395,396],{"class":76},"  \u003C",[55,398,399],{"class":83},"article",[55,401,391],{"class":76},[55,403,404],{"class":57,"line":93},[55,405,407],{"class":406},"sHwdD","    \u003C!-- your post -->\n",[55,409,410,413,415],{"class":57,"line":103},[55,411,412],{"class":76},"  \u003C\u002F",[55,414,399],{"class":83},[55,416,391],{"class":76},[55,418,419],{"class":57,"line":153},[55,420,268],{"emptyLinePlaceholder":267},[55,422,423,425,427,430,433,436,439,441],{"class":57,"line":159},[55,424,396],{"class":76},[55,426,16],{"class":83},[55,428,429],{"class":197}," app-key",[55,431,432],{"class":76},"=",[55,434,435],{"class":76},"\"",[55,437,438],{"class":125},"YOUR_APP_KEY",[55,440,435],{"class":76},[55,442,443],{"class":76}," \u002F>\n",[55,445,446,449,451],{"class":57,"line":165},[55,447,448],{"class":76},"\u003C\u002F",[55,450,388],{"class":83},[55,452,391],{"class":76},[10,454,455,456,459,460,463],{},"The widget follows Vue Router navigation by itself and loads the new page's thread. Bind attributes as usual, for example ",[14,457,458],{},":page-id=\"post.id\""," or ",[14,461,462],{},":sso-token=\"token\"","; it reacts when they change.",[465,466,468],"h2",{"id":467},"next-steps","Next steps",[470,471,472,480],"ul",{},[473,474,475,476,39],"li",{},"Sign your users in to the comments with ",[30,477,479],{"href":478},"\u002Fdocs\u002Fen\u002Fsite-owners\u002Fintegrations\u002Fsingle-sign-on","single sign-on",[473,481,482,483,487,488,39],{},"Switch on ",[30,484,486],{"href":485},"\u002Fdocs\u002Fen\u002Fsite-owners\u002Fmoderation\u002Frules-and-lifecycle","AI moderation"," and pick a ",[30,489,491],{"href":490},"\u002Fdocs\u002Fen\u002Fsite-owners\u002Fgetting-started\u002Fappearance","theme",[493,494,495],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":51,"searchDepth":80,"depth":93,"links":497},[498,499,500,501],{"id":25,"depth":93,"text":26},{"id":42,"depth":93,"text":43},{"id":372,"depth":93,"text":373},{"id":467,"depth":80,"text":468},"Add a comment section with AI moderation to a Nuxt or Vue app. Mark crow-comments as a custom element and load one script.","md","i-simple-icons-nuxt",{},"\u002Fintegrations\u002Fnuxt",{"title":5,"description":502},"integrations\u002Fnuxt","BY2nrhlwR0yZcahw8VT6P7K8qUqkB7XRg6EEXBDDduo",1792581803658]