WebReinvent Internal Docs
Builderio Nuxt 3

Page Model

Introduction

Page Models are the paradigm, or pattern, that defines what a Page is. When you make a Page content entry in the Content section of Builder, Builder uses the Page model to create that Page content entry.

About Page models

By default, a Builder Space comes with one Page model, which most people use for the content between the header and footer. Uses for Page models include:

With just one Page model, you can create countless pages with unique URLs and edit those pages in the drag-and-drop interface of the Visual Editor.

The following image delineates a typical Page within the Visual Editor. A Page is everything between your header and footer. Simple page model example

Finding the Page model

To view the details of the Page model(s) in a Space, do the following:

  1. Go to the Models section of the Builder UI.
  2. Select the Page model.

From within the Page model, you can edit and add fields. For details on fields in models, refer to Custom Fields.

Creating a Page model

To create a new Page model, make sure to give it a helpful name and Description so that users know how to use the model.

  1. Go the Models section of the Builder UI.
  2. Click the + Create Model button.
  3. Choose Page.
  4. In the Model Display name field, enter the name you'd like this model to have when listed in the Models section of Builder. You can edit this later if you change your mind.
  5. Name the model and fill out the Model Description field.
  6. Click Create.
  7. Add any needed custom fields.
  8. The model saves automatically.

To use the new Page model, integrate with your codebase and then your teammates can create content entries in the Visual Editor.

The following video shows how to create an example Docs Page model with a Description. The description of "Standard Documentation Page" displays under the new model in the Content section of Builder so users understand when to use the Docs Page model.

Integrating Page with Nuxt-3

This Quickstart shows how to integrate page building with Builder.io in a brief format. We recommend this as the best way to get started with the Builder platform.

Steps for setup

1) Install the Builder.io dependencies.

NOTE: Keep checking the sdk-vue version and associated changelog on regular basis.

npm install "@builder.io/sdk-vue" --save

npm install "@builder.io/sdk" --save

npm install "@builder.io/vue" --save

2) Add the SDK's nuxt module @builder.io/sdk-vue/nuxt in the nuxt.config.ts file

export default defineNuxtConfig({
  ...,
  modules: [
    '@builder.io/sdk-vue/nuxt'
  ],
  ...
})

3) Run development server

npm run dev

4) Replace the default <NuxtWelcome /> component with NuxtPage component in app.vue file and wrap it inside a NuxtLayout component like a typical Nuxt application

<NuxtLayout>
<NuxtPage/>
</NuxtLayout>

5) Add your builderApiKey in .env file

NUXT_PUBLIC_BUILDER_API_KEY=YOUR_PUBLIC_API_KEY

6) Replace the YOUR_API_KEY value with your space Public API Key, which you can find in the Account Settings in Builder. Public API Key

7) Configure builderApiKey in your nuxt.config.ts file

export default defineNuxtConfig({
  ...,
  runtimeConfig: {
    public: {
      builderApiKey: ''
    }
  },
  ...
})

8) Create pages directory at root location and create a new file with name [page].vue inside the pages directory.

9) Paste below code in [page].vue file.

<template>
  <div id="home">
    <!-- If content is true, render the Builder content using the
    Content component (previously, RenderContent) and the "page" model. -->
    <div v-if="content || isPreviewing()">
      <Content
        model="page"
        :apiKey="config.public.builderApiKey"
        :content="content"
      />
    </div>
    <!-- If canShowContent is false, show a "Content not Found" message. -->
    <div v-else>Content not Found</div>
  </div>
</template>

<script setup>
import {Content, fetchOneEntry, isPreviewing} from "@builder.io/sdk-vue";
const route = useRoute();

const config = useRuntimeConfig();

const content = await fetchOneEntry({
  model: "page",
  apiKey: config.public.builderApiKey,
  userAttributes: {
    urlPath: route.path
  }
})
</script>

10) Go to the Models section in Builder. Builder Models11) Choose your Page model. Builder Page Model

12) Set the Preview URL to http://localhost:YOUR_PORT where YOUR_PORT is the port number for your app. Be sure to include the http:// and Click on Save button. Builder Preview url

13) In the Content section of Builder, create a new blank Page and name it something like "Test Page" . Builder ContentBuilder Create new pageBuilder New page name

14) Go to http://localhost:3000/test-page, where test-page is the name you gave your page.

15) Add some minimal content, such as a Text block with some copy such as "Yes I did it!" and Click the Publish button. Publish the page

16) Now check out your work. Well done!

Preview URL's

Section Model

Copyright © 2024