Steps to integrate my existing inertia and vue site with builder

General
1

hi,
we have a site with inertia and vue js
now we want to integrate builder.io to build pages easily with our own components
what is exact steps to do

2

Hello @sinan,

Greetings and welcome to the Builder.io forum!

As you embark on your journey, we suggest diving into our Quickstart guide, which will guide you through seamlessly integrating Builder with your Vue.js app. You can find the guide here:

3

thanks
my second question is how can i edit an existing simple html file with builder?

4

Hello @sinan!

Editing an existing HTML file directly isn’t supported, but you can leverage the Builder web components API for dynamic content updates. Utilize the <script> tag and the <builder-component> custom element, allowing you to set targeting attributes for Builder to load HTML content dynamically. Here’s a simple example:

<builder-component model="page" api-key="YOUR_API_KEY">
  <!-- HTML here displays while your content is loading, 
  for example, put a gif here, or leave empty -->
</builder-component>
<script async src="https://cdn.builder.io/js/webcomponents"></script>
5

so i have added this code for this sample
https://dnslookup.pro/tt.html
what is next step ?

6

Hello @sinan,

You can now set up a preview URL in Builder, enabling convenient drag-and-drop functionality. For detailed instructions, please refer to the guide available at:

7

i have intresting issue
in list, preview of html is shown

image
image1989×1196 138 KB

but in edit page its not loading the contetn
image
image1978×1373 148 KB

8

Hello @sinan,

To ensure visibility within the editor, make sure your entire HTML body content, including the header and footer, is encapsulated inside the <builder-component>.

<builder-component model="page" api-key="YOUR_API_KEY">
  <!-- HTML here displays while your content is loading, 
  for example, put a gif here, or leave empty -->
</builder-component>