alpha
Core

Layers

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 single Tailwind build.

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.

A layer brings its upstream layers. @plutocms/supabase extends @plutocms/core. @plutocms/supabase-shop extends @plutocms/supabase. @plutocms/supabase-blog extends @plutocms/supabase. @plutocms/docs extends @plutocms/core. You do not list them again in your app.

What core gives

  • <PlutoRoot>. It wraps your app in app.vue. It includes the admin navbar, NuxtLayout, NuxtLoadingIndicator, and the base styles.
  • <ColorModeButton>. A light and dark mode toggle with no configuration.
  • 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.

In package.json, the app needs only that top layer, 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.

Project structure

Learn what a new Pluto project contains.

Admin shell

Core owns the admin routes, the sign-in page, the route guard, and the navbar.