1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[139],{3053:function(e,s,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/twitter-theme",function(){return t(6405)}])},6405:function(e,s,t){"use strict";t.r(s),t.d(s,{__toc:function(){return o}});var n=t(7458),r=t(2329),i=t(6859);let o=[{depth:2,value:"Usage",id:"usage"},{depth:2,value:"Troubleshooting",id:"troubleshooting"}];function l(e){let s=Object.assign({h1:"h1",p:"p",a:"a",code:"code",h2:"h2",pre:"pre",span:"span"},(0,i.a)(),e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.h1,{children:"Twitter Theme"}),"\n",(0,n.jsxs)(s.p,{children:["This is the theme you'll see in ",(0,n.jsx)(s.a,{href:"https://publish.twitter.com/?query=https%3A%2F%2Ftwitter.com%2FInterior%2Fstatus%2F463440424141459456&widget=Tweet",children:"publish.twitter.com"})," and the default theme included in ",(0,n.jsx)(s.code,{children:"vue-better-tweet"}),"."]}),"\n",(0,n.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsxs)(s.p,{children:["In any component, import ",(0,n.jsx)(s.code,{children:"Tweet"})," from ",(0,n.jsx)(s.code,{children:"vue-better-tweet"})," and use it like so:"]}),"\n",(0,n.jsx)(s.pre,{"data-language":"vue","data-theme":"default",hasCopyCode:!0,children:(0,n.jsxs)(s.code,{"data-language":"vue","data-theme":"default",children:[(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"script"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"setup"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"lang"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"ts"'}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { Tweet } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'vue-better-tweet'"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"script"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(s.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"template"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"Tweet"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"id"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"1628832338187636740"'}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"template"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsx)(s.h2,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,n.jsxs)(s.p,{children:["Currently, ",(0,n.jsx)(s.code,{children:"vue-better-tweet"})," uses CSS Modules to scope the CSS of each component, so the bundler where it's used needs to support CSS Modules. If you get issues about your bundler not recognizing CSS Modules, please open an issue as we would like to know how
1well supported this is."]})]})}s.default=(0,r.j)({MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,i.a)(),e.components);return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(l,{...e})}):l(e)},pageOpts:{filePath:"pages/twitter-theme.mdx",route:"/twitter-theme",timestamp:177004879e4,title:"Twitter Theme",headings:o},pageNextRoute:"/twitter-theme"})}},function(e){e.O(0,[329,888,774,179],function(){return e(e.s=3053)}),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.