alpha
Extend Pluto

How layers work

Learn how the core layer and other layers work together.

The core layer is @plutocms/core. Core is the base layer every Pluto app extends. It gives the foundation of the CMS. Other layers plug into it.

Layer kinds

Core layer. It owns the admin shell, the content model, the extension registry, permissions, mail, i18n, and the admin CSS.

Backend layers. They handle data, authentication, and APIs. @plutocms/supabase is the first one. Other providers are possible in the future.

Feature layers. They add domain features on top of a backend layer. @plutocms/supabase-shop and @plutocms/supabase-blog are feature layers. @plutocms/docs is a feature layer on top of core. It needs no backend layer.

Add-on layers. They add one feature for every backend: the Git CMS or Supabase. An add-on does not extend core: your app or its backend layer brings core, so core loads one time.

The layer directory lists every official layer and its kind.

A layer brings its upstream layers: a feature layer brings its backend layer, and the backend layer brings core. You do not list them again in your app. The layer directory shows what each layer extends.

What core gives

  • <PlutoRoot>. Pluto wraps your app.vue in it (you can also write it yourself). It includes the admin navbar, NuxtLayout, NuxtLoadingIndicator, and the base styles.
  • <ColorModeButton>. A light and dark mode toggle for your site, with no configuration. See Components.
  • The admin shell: the /admin route, the /admin/login page, the route guard, and the navbar.
  • <PlutoNavbarAdmin> and <PlutoNavbarAdminActions>. They give structure for actions from other layers.
  • definePlutoExtension. One function that a layer calls to plug into the admin.
  • The Git CMS. An optional standalone CMS with Markdown files in a Git repository: local Git in development, GitHub on a deployed site.

Extend the layers

Extend only the top layer that you use. It brings the layers below it. This example uses the shop layer. It brings @plutocms/supabase and @plutocms/core.

First, install the package of the layer. extends does not install an npm package: Nuxt looks for it in node_modules.

npm install @plutocms/supabase-shop

Then extend it:

nuxt.config.ts
export default defineNuxtConfig({
  extends: ['@plutocms/supabase-shop']
})

An app with no database extends @plutocms/core alone.

Add an add-on next to the top layer:

nuxt.config.ts
export default defineNuxtConfig({
  extends: ['@plutocms/core', '@plutocms/3d']
})

In package.json, the app needs only that top layer and its add-ons, with nuxt, vue, and vue-router. The package manager installs the layers below it, and the dependencies of each layer.

The { install: true } option of extends is for a layer that Nuxt downloads from a Git source, such as ['github:org/my-layer', { install: true }]. Then Nuxt installs the dependencies of that layer. An npm layer does not need the option.

Read the data

You can read the data in two ways:

  • With composables, inside the Nuxt app.
  • With the REST routes that the layers expose, from any app or stack. Core has generic content routes under /api/_pluto/content/. They are for the admin. See Content model.

For a public read, use the Public API (/api/pluto/v1). A site in another framework reads it too. See Use Pluto headless.

Learn more

Extension registry

The one function that a layer uses to plug in.

Create a layer

Build your own layer.

Extend Pluto

Optional. How the admin works from the inside, and how to add your own features to it.

Create a layer

Build your own Pluto layer and plug it into the admin.