Using Builder Api Key

An API key is an alphanumeric string that you can use to connect your code base with Builder. Use the Builder Public API Key to integrate with Builder.

An example of a Builder API Key is bb209db71e62412dbe0114bdae18fd15.

Prerequisites

To get the most our of this document, you should have the following:

• Builder account
• Nuxt Project
  if you haven't setup a nuxt project yet - Click here

Finding your Public API Key

• Go to Builder.io
• Click on Go to App
• Click on Settings
• Copy your public api key

Using your Public API Key in Nuxt App

• Create a .env file in your root folder and create an env variable For Ex BUILDER_API_KEY
• Now go to nuxt.config.ts file and add the following code

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiKey: process.env.BUILDER_API_KEY //Replace BUILDER_API_KEY with your env variable
    }
  }
})

• Now go to your page where you are using Content Component (previously, RenderContent) and update the code there

const config=useRuntimeConfig() 
const api_key=ref(config.public.apiKey) //this is your api key
const content = await fetchOneEntry({
  model: model_name,
  apiKey:api_key.value,
  userAttributes: {
    urlPath: '/' + route.params.page,
  },
})

• Also update it in Content Component (previously, RenderContent)

<Content
model="page"
:content="content"
:apiKey="api_key"
/>

Finding your Private API Key

• Click on Settings
• Click on Edit
• Give it a name and copy it
  Now you can use it exactly like Public Api Key
• You are good to go , All the Best!