Partial

Partial lets you import files from src/content/partials. They’re used to organize long-form content like landing pages into managable chunks.

Organize large files into managable chunks

So they become easier to remember, find, parse, and edit — and you have an easier time maintaining your site or creating new things on them!

<Partial path="landing/intro" />
<Partial path="landing/features" />
<Partial path="landing/... other files ..." />
<Partial path="landing/call-to-action" />

Pass components into partials or import them from the partial

Common components can be passed directly into partials so you don’t always have to import them in every file and, you can still import additional components whenever you need — best of both worlds!

---
import Comp1 from '@/components/Comp1.astro'
import Comp2 from '@/components/Comp2.astro'
const components = { Comp1, Comp2 }
---

<Partial path="file" {components} />

{/* partial.mdx */}
import Comp1 from '@/components/Comp1.astro'
import Comp2 from '@/components/Comp2.astro'

{/* Usage */}
<Comp1 />
<Comp2 />

No JavaScript voodoo required

Unlike Astro’s built-in partial feature, Partial does not need any JavaScript to work.

Just use Partial and your partials will be added into your HTML in the order you state.

<Partial path="loaded" />
<Partial path="without" />
<Partial path="javascript" />

Basic Usage

You can use Partial by importing the Partial component and passing path property to it.

---
import { Partial } from '@splendidlabz/astro'
---

<Partial path="path-to-partial" />

The Partials Directory

Partials have to be placed in the partials directory (src/content/partials). Files you put into this directory can be read by the Partial component.

When you want to import a partial, pass its file name (without extensions) into the path property.

|- src
    |- content
        |- partials
            |- your-file.md

<Partial path="your-file" />

Nested partials

Recursive nested directories are supported.

To import a nested partial, pass the nested directory path and the file name to the path property.

|- partials
    |- nested
        |- deeply-nested
            |- file.md

<Partial path="nested/deeply-nested/file" />

Supported Extensions

Partial supports md, mdx and astro extensions.

|- partials
    |- your-file.md
    |- your-file-2.mdx
    |- your-file-3.astro

Passing Components into Partials

Components can be passed into partials with the mdx and mdx extensions. Alternatively, you can also import components directly within the partial.

---
import Comp1 from '@/components/Comp1.astro'
import Comp2 from '@/components/Comp2.astro'
const components = { Comp1, Comp2 }
---

<Partial path="file" {components} />

{/* Partial file, mdx */}
import Comp1 from '@/components/Comp1.astro'
import Comp2 from '@/components/Comp2.astro'

{/* Usage */}
<Comp1 />
<Comp2 />

Note

Client directives don’t work on components that are passed into a partial. If you need client directives, you need to import the component from the partial.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.