Custom Theme

vue-better-tweet exports multiple utility functions to help you build your own theme if the default Twitter theme and its customization options don't work for you or if you simply want to build your own.

To get started, we recommend using the source for the Twitter theme (opens in a new tab) as the base and start customizing from there. Which more precisely is all of the components in the vue-better-tweet package (opens in a new tab):

src/tweet.vue (opens in a new tab): Exports the async Tweet component that fetches the tweet data and renders the tweet. This is a Nuxt Server Component (opens in a new tab).
src/twitter-theme/*.vue (opens in a new tab): All the components that make up the theme.
src/swr.vue (opens in a new tab): Exports the Tweet component but it uses SWRV (opens in a new tab) to fetch the tweet client-side. This is useful if Nuxt Server Components are not supported by your Vue environment.

You can see a custom theme in action by looking at our custom-tweet-dub (opens in a new tab) example.

Publishing your theme

We recommend you follow the same patterns of the Twitter theme before publishing your theme:

Use the props defined by the TweetProps type in your Tweet component.
Support the CSS theme features shown in Toggling theme manually. You can use the base.css (opens in a new tab) file from the Twitter theme as reference.
Support both SWR and Nuxt Server Components as explained below.

When you use vue-better-tweet we tell the builder which Tweet component to use with exports in package.json:

package.json

"exports": {
  ".": "./dist/index.client.js",
  "./server": "./dist/index.js",
},

In environments that support Nuxt Server Components, the ./server entry point is used. In other environments, the default entry point is used.

Each export goes to a different file that exports the Tweet component. In this case index.ts exports a React Server Component and index.client.ts exports the Tweet component that uses SWR:

index.ts

export * from './twitter-theme/components.js'
export * from './tweet.js'
export * from './utils.js'
export * from './hooks.js'

index.client.ts

export * from './twitter-theme/components.js'
export * from './swr.js'
export * from './utils.js'
export * from './hooks.js'

Advanced Contributing