Creating a new page offers no templates

[HTY]

I’m trying to create a new page and when I do it I don’t get the option to create one from a template. I just want a blank page to start with.

As a result I get a page with tiled grey-white gradients that I can do nothing about. There’s no option to remove the tiled gradients, and if I somehow manage to preview them then the gradient tiles are there.

Is there a way to make pages from scratch? Or am I stuck with the tiled gradient background for everything?

[manish-sharma]

Hello @HTY,

Welcome to the builder.io forum post.

It appears that the gray-white gradients you’re experiencing might be related to your system graphics, and we suspect they could be the editor’s background color rather than a predefined template. Are you encountering this issue on a Windows system? Have you attempted to use a different browser to see if the issue persists? Additionally, sharing a screenshot of the problem would provide us with more context to better understand and assist you.

[HTY]

Hi @manish-sharma ,

Thanks for your answer. I am using a Mac. It wasn’t doing this when I first started and then after going to bed, the next day it started doing this. So nothing was changed at all.

I have used this both on Opera and Chrome and both have the same result.

I’ve tried deleting the whole folder the command line created when starting this and am trying to start again.

Here is what I was seeing:

[manish-sharma]

Hello @HTY,

It appears that the issue is related to graphics. Could you confirm if you encounter the same problem when using the Builder fallback editor?

Using the fallback editor in Builder.io - Builder.io

[HTY]

Hi @manish-sharma ,
Sorry for the dumb question. What is the Builder fallback editor?

[manish-sharma]

@manish-sharma

Using the fallback editor in Builder.io - Builder.io

Please check the following link Using the fallback editor in Builder.io - Builder.io

[HTY]

The issue doesn’t appear with the fallback editor. I get a blank page with some text

[HTY]

I’m getting a completely different error now and now nothing is working how it’s described in the documentation.

I think I have to create a new post though, because it’s different to this thread.

[manish-sharma]

Hello @HTY,

Therefore, we suspect the issue is coming from your code base. Are you using global.css or any similar file, if so can you share the code from that file?

[HTY]

Hi @manish-sharma
I followed the steps in the documentation. It told me to run some command lines, so I did. There’s a folder it made and I don’t know what the files are or do.
I don’t see a global css file and I don’t see the pages I made on Builder io in the folder that the command lines produced. Nor do I know where the files go when I click the Publish button. None of that is explained in the documentation I saw so it’s possible I haven’t seen it yet.

[manish-sharma]

Can you give us more context on the error you are encountering?

[HTY]

I’m using Vue and Nuxt following the documentation here: Integrating Pages - Builder.io

issues:

1. Go to Content. Click “New Entry” with the default Page model. Enter a name. It goes straight to the editor. I do not see the template picker as per the documentation anymore

2. It gives me a pop up saying it can’t connect to localhost:3000 even though it loads the Nuxt page. (and yes, the Page model has it’s preview url set to http://localhost:3000)

3. The Builder io drag and drop components don’t load

[manish-sharma]

Hello @HTY,

Please ensure that you are using the correct Builder API key for your integration.

https://www.builder.io/c/docs/integrating-builder-pages#getting-your-api-key

[HTY]

Hi @manish-sharma

I am indeed using the api key

could it somehow be using the wrong one? I only see one.

[manish-sharma]

Hello @HTY,

For me to be able to help you, could you please provide me with the Builder Content Entry link where you’re experiencing an issue as this will further my investigation?

Here is how to find it:

[HTY]

Hi @manish-sharma

here you go: Builder.io: Visual Development Platform

[manish-sharma]

Hi @HTY,

Regrettably, I wasn’t able to reproduce the issue with the preview on our end, therefore, can you share screenshot of you project directory structure and app.vue code?

[HTY]

Hi @manish-sharma
this is the folder structure:

[manish-sharma]

Can you share the exact code from app.vue as well?

[HTY]

Whoops, sorry, yes. It came from the documentation

<template>
  <div id="home">
    <div>Hello world from your Nuxt 3 project. Below is Builder Content:</div>
    <div v-if="canShowContent">
      <div>
        Page title:
        {{ (content?.data?.title) || 'Unpublished' }}
      </div>
      <Content
        :model="page"
        :content="content"
        :api-key="apiKey"
      />
    </div>
    <div v-else>Content not Found</div>
  </div>
</template>
  
<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { Content, isPreviewing, fetchOneEntry } from '@builder.io/sdk-vue';

// TODO: enter your public API key
const apiKey = "bccba5babccf433baff115722de07ec6";

const route = useRoute();
const urlPath = computed(() => `/${route.params.slug.join('/')}`);
const content = ref(null);
const canShowContent = ref(true);

// Fetch the Builder content for the page that matches the URL path
try {
  const response = await fetchOneEntry({
    model: 'page',
    apiKey,
    userAttributes: {
      urlPath: urlPath.value,
    },
  });
  content.value = response;
  canShowContent.value = content.value || isPreviewing();
} catch (error) {
  console.error('Builder content not found:', error);
  if (process.server) {
    // Set the HTTP response status code to 404 if no content is found
    const nuxtApp = useNuxtApp();
    nuxtApp.ssrContext.event.res.statusCode = 404;
  }
}
</script>

Hi, so the forum no longer allows me to post and I have to wait 21 hours before I can post again.

I am getting this in the console: