# LayoutPage

The LayoutPage is a component that renders the Storyblok component LayoutPage.

Storyblok

This component exists in Storyblok too. This is an entry type component.

story: {
  content: {
    // required
    title: '',
    body: [
      // Content components
    ],
    seo: {
      _uid: '',
      title: '',
      plugin: 'seo_metatags',
      og_image: '',
      og_title: '',
      description: '',
      twitter_image: '',
      twitter_title: '',
      og_description: '',
      twitter_description: ''
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Dependencies

This component depends on a lot of content and layout components.

# Components

Required:

ContentPageTitle

Can render:

# Props

Name	Type	Required	Default	Description
title	`String`	`true`	-	`<h1>`
body	`Array`	`true`	-

# Variants

None.

# Example

Good

<!-- Use the prop to pass the content to the component. -->
<LayoutPage
  :title="story.content.title"
  :body="story.content.body"
/>

<!-- In nuxt-starter/pages component with Storyblok data -->
<main>
  <!-- story.conent.component === "LayoutPage" -->
  <component
    :is="story.content.component"
    v-if="story.content.component"
    :key="story.content._uid"
    v-editable="story.content"
    v-bind="story.content"
  />
</main>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Bad

<!-- This component is a entry type component in Storyblok.
  It carries the <h1> for the page and should therefore
  only be used on nuxt-starter/pages components. -->
<LayoutSection title="Section 1">
  <LayoutPage>
    lorem impsum
  </LayoutPage>
</LayoutSection>

<!-- Use the props for passing the content.
  This Component does not have a slot. -->
<LayoutPage>
  lorem impsum
</LayoutPage>

1
2
3
4
5
6
7
8
9
10
11
12
13
14