<StatamicBlock>

Usage

The StatamicBlock component is used to render the blocks from the Statamic API response.

It will handle the fields from the default "Helper: blok opties" fieldset and pass them as data- attributes to the component. With the exception of the "anchor" field, which is passed as the id attribute.

In order for this component to work, we need to update the nuxt.config.ts and main.css files to include the following:

export default defineNuxtConfig({
    // ...
    components: [         { path: "~/components/blocks", global: true },        "~/components",    ],    // ...
});

@import "tailwindcss";
@import "@nobears-front-end/nuxt-statamic";

This ensures that the StatamicBlock can find the correct component based on the type field in the block.

Basic example

<script setup lang="ts">
const { 
data
, 
error
 } = await 
useStatamicPage
();
useStatamicPageErrorHandler
(
error
);
</script>

<template>
    <!-- // ... -->
    <component
        :is="
resolveComponent
(toPascalCase(
block
.type))"
        v-for="
block
 in 
data
?.
blocks
"
        
:
key
="
block
.id"
        
:
block
="
block
"
    />
    <!-- // ... -->
</template>

<script setup lang="ts">
import type { 
TextField
, 
StatamicBlockProps
 } from "@nobears-front-end/nuxt-statamic";

export type 
TextImageProps
 = 
StatamicBlockProps
<{
    
title
: 
TextField
;
    // ...
}>;
</script>

<script setup lang="ts">
const props = defineProps<TextImageProps>();
</script>

<template>
    <StatamicBlock 
:
block
="props.block">
        <!-- Content here -->
    </StatamicBlock>
</template>

Building your own custom block

You can build your own custom block by creating a new component in the app/components/blocks directory.

<script setup lang="ts">
import type { 
TextField
, 
StatamicBlockProps
 } from "@nobears-front-end/nuxt-statamic";

export type 
TextImageProps
 = 
StatamicBlockProps
<{
    
title
: 
TextField
;
    // ...
}>;
</script>

<script setup lang="ts">
const props = defineProps<TextImageProps>();
</script>

<template>
    <StatamicBlock 
:
block
="props.block">
        <!-- Content here -->
    </StatamicBlock>
</template>

Adding custom spacings

By default, the StatamicBlock component provides the none, small, medium and large spacing options.

When you need to add more spacing options, you can do so by adding the following to your main.css file:

@import "tailwindcss";
@import "@nobears-front-end/nuxt-statamic";

@theme default inline {
    --spacing-statamic-block-extra-large: --spacing(48);
    --spacing-statamic-block-extra-large--sm: --spacing(64);
    --spacing-statamic-block-extra-large--md: --spacing(80);
}

@layer components {
    [data-spacing-top="extra-large"] {
        @apply pt-statamic-block-extra-large
               sm:pt-statamic-block-extra-large--sm
               md:pt-statamic-block-extra-large--md;
    }
    [data-spacing-bottom="extra-large"] {
        /* ... */
    }
}

Adding custom background colors

@import "tailwindcss";
@import "@nobears-front-end/nuxt-statamic";

@layer components {
    [data-background-color="primary"] {
        @apply bg-primary; 
    }
}

Type Definition

The StatamicBlock exposes the StatamicBlockProps and StatamicBlockOptions types so you can build your own custom block in a unified way.

It includes all the fields that are by default included in the "Helper: blok opties" fieldset when you create a new Statamic project using our template.

Have a look the Building your own custom block example for more information.

/**
 * The default fields that are provided by the "Helper: blok opties" fieldset.
 */
type 
StatamicBlockOptions
 = {
    
background_color
: 
SelectFieldSingle
<string>;
    
padding_bottom
: 
ButtonGroupField
<"none" | "small" | "medium" | "large" | (string & {})>;
    
padding_top
: 
ButtonGroupField
<"none" | "small" | "medium" | "large" | (string & {})>;
    
anchor
: 
TextField
;
};

/**
 * The props for the StatamicBlock component
 * @template T - The type of the block data
 * @template O - The type of the options
 */
type 
StatamicBlockProps
<
    
T
 extends 
Record
<string, any> = 
Record
<string, any>,
    
O
 extends 
Record
<string, any> = 
StatamicBlockOptions
,
> = {
    /**
     * The block data from Statamic
     */
    
block
: {
        
id
: 
TextField
;
        
type
: 
NonNullable
<
TextField
>;
    } & 
O
 & 
T
;
    /**
     * The element or component this component should render as.
     * @defaultValue "section"
     */
    
as
?: "div" | "section" | "template" | ({} & string);
};

API Reference

Props

Attributes

CSS Variables

The spacing for the StatamicBlock component is controlled by the [data-spacing-{side}] attribute. The {side} can be top or bottom. We use a tailwindcss @layer components definition to then apply the spacing to the block. (Take a look at the Adding custom spacings section for more information.)

The CSS variables for controling the spacing for the StatamicBlock component follow the format:

--spacing-statamic-block-{spacing}-{breakpoint}

• {spacing} - The spacing value (e.g., none, small, medium, large).
• {breakpoint} - Optional breakpoint modifier (e.g., sm, md, lg). When omitted, the variable applies globally.

Changelog