Components
Pluto gives your public site some components. They work with Tailwind and without Tailwind. Their look is in an optional CSS file.
The components
| Component | Layer | Use |
|---|---|---|
PlutoRoot | Core | Pluto wraps your app.vue in it, so you do not write it. It adds the admin bar and the base styles of the page. Write it yourself to take control of the root (see Project structure). |
PlutoHtml | Core | Shows the html of a public item, such as the body of a post. |
PlutoImage | Core | Shows an image of the media library, with the sizes of the image service. |
PlutoLogo | Core | Shows the Pluto logo. |
ColorModeButton | Core | Switches the site between light and dark mode. |
PlutoProse | @plutocms/supabase-blog | Shows a stored rich text value (Markdown, HTML, or Tiptap JSON). |
Pluto3dViewer | @plutocms/3d | Shows a 3D model. Drag to turn it, scroll or pinch to zoom. |
Pluto3dPreview | @plutocms/3d | Shows the preview image of a 3D model. A click starts the viewer. |
The docs layer is a full docs site on Nuxt UI and Nuxt Content. A site that uses it needs Tailwind and Nuxt UI.
The base CSS
The components have no Tailwind classes. Each component has a class that starts with pluto-, for example pluto-prose.
- The layout of a component is in the component. It always loads. For example, the 3D viewer fills its box with no other CSS.
- The look (fonts, colors, spacing, borders) is in the base CSS. It is optional. Without it, a component shows the browser defaults.
To get the look, import the base CSS in a CSS entry of your app:
@import '@plutocms/css/base';
A Tailwind site imports it after its other imports:
@import 'tailwindcss';
@import '@nuxt/ui';
@import '@plutocms/css';
@import '@plutocms/css/base';
@plutocms/css/base is not an npm package. Core makes it from the base CSS of each layer that you use. It is plain CSS, so it works with no Tailwind. See Styles.
Change the look
Every rule of the base CSS has zero specificity, and it is in the components cascade layer. So your CSS always wins:
- On a Tailwind site, a utility on the component wins:
<PlutoHtml class="text-lg" :html="html" />. - On a site with no Tailwind, any rule of your site wins:
.pluto-prose h2 { color: teal; }.
The base CSS reads the theme variables of Nuxt UI, such as --ui-primary and --ui-text-muted. On a Nuxt UI site, the components follow your colors and your dark mode. On another site, they use readable defaults.
PlutoHtml
<PlutoHtml :html="post.html" />
| Prop | Default | Meaning |
|---|---|---|
html | none | The sanitized HTML of a public item. Do not give other HTML. |
tag | 'article' | The wrapper element |
It shows the player of an embed in place of a paragraph that is one video URL alone. It shows a thumbnail. A click loads the player.
It also shows the content components of a post (::name{props}): each component of components/content/ that calls definePlutoBlock. See Components in posts.
It has the class pluto-prose. The base CSS gives it headings, links, lists, quotes, code, tables, and task lists. You can set these variables on .pluto-prose or on a parent element:
| Variable | Default |
|---|---|
--pluto-prose-heading | --ui-text-highlighted, else the text color |
--pluto-prose-muted | --ui-text-muted, else a lighter text color |
--pluto-prose-link | --ui-primary, else the link color of the browser |
--pluto-prose-border | --ui-border, else a light line |
--pluto-prose-border-accented | --ui-border-accented, else a darker line |
--pluto-prose-code-bg | --ui-bg-muted, else a light tint |
--pluto-prose-th-bg | --ui-bg-elevated, else a light tint |
--pluto-prose-radius | 1.5 × --ui-radius |
--pluto-prose-mono | --font-mono, else the monospace font of the system |
.pluto-prose {
--pluto-prose-link: #0b7285;
}
PlutoProse of the blog layer has the same class and the same look. See Blog.
PlutoImage
<PlutoImage :media="post.cover" sizes="xs:100vw sm:50vw lg:800px" />
| Prop | Default | Meaning |
|---|---|---|
media | null | A media record of the public API |
sizes | 'xs:100vw sm:50vw lg:800px' | The sizes of @nuxt/image |
alt | the alt text of the record | The text alternative |
loading | 'lazy' | 'lazy' or 'eager' |
fetchpriority | 'auto' | 'high', 'low', or 'auto' |
It renders one <img> with no class. Your class goes on the <img>. See Media.
PlutoLogo
<PlutoLogo mark class="logo" />
mark shows the planet only, with no wordmark. The wordmark uses the text color. The logo is an SVG with no size: give it a width or a height.
ColorModeButton
<ColorModeButton class="size-8 rounded-md hover:bg-zinc-100" />
It renders one <button> with a sun or a moon icon, and the pluto-color-mode-button class. Your class goes on the <button>. The icon is 1em square: set its size with font-size.
- The color mode is known in the browser only. Before that, the button is an empty
<span>with your class, so the space stays the same. - When the page forces a color mode, the button does not show.
The 3D components
See 3D for the props. A box with a size is enough for the layout. The base CSS gives the loading badge, the hint, and the button their look.
The admin bar
When a signed-in editor sees the admin bar on a public page, PlutoRoot moves the page down by the height of the bar. You do not add an offset for the page. A Nuxt UI UHeader sticks under the bar by itself; another sticky or fixed header needs the class pluto-header-offset or its own offset. See Admin shell.