Home App Docs Blog Github

Passing down data from vue to builder.io

//vue code
<template>
  <div v-if="notFound">
    <!-- Show your 404 content -->
    Page not found
  </div>
  <div v-else>
    <RenderContent
      model="home"
      @contentLoaded="contentLoaded"
      :options="{
        auth: 'false',
        loc: 'NY',
      }"
    />
  </div>
</template>

<script>
import { builder, RenderContent, Builder } from "@builder.io/vue";

// TODO: enter your public API key
builder.init("MY-API-KEY");

export default {
  data: () => ({
    notFound: false,
  }),
  components: { RenderContent },
  methods: {
    contentLoaded(content) {
      const isEditingOrPreviewing = Builder.isEditing || Builder.isPreviewing;
      if (!content && !isEditingOrPreviewing) {
        this.notFound = true;
      }
    },
  },
};
</script>
//React code
import { BuilderComponent, builder } from '@builder.io/react'
import {useState,useEffect} from 'react'
builder.init('MY-API-KEY')
  
export const App = () => {
  const [builderContentJson, setBuilderContentJson] = useState(null)

  useEffect(() => { 
    builder.get('spud-home', { url: location.pathname })
      .promise().then(setBuilderContentJson)
  }, [])

  return <BuilderComponent model="home" content={builderContentJson}   data={{
    auth: "false",
    loc:"NY"
  }} />
}


export default App;

how to access those auth,loc data in my builder.io? state.auth and state.loc doesn’t working.same time auth and loc data are not avaliable in my state object.Meantime if i use react code those data are avaliable in my state object . what is the correct method to passing down the data to builder.io using vue

//builder.io custom code with vue
console.log(state,"state") 
console.log(state.loc) // undefined
//builder.io custom code with react
console.log(state,"state") 
console.log(state.loc) // "NY"

Thanks in advance

@rajapandi Unfortunately, our Vue SDK is still in beta and does not support the data attribute that is supported in our React SDK. It is hard to give an estimate on delivery of this feature, but our Vue SDK is actively being worked on at the moment and this is something on our roadmap. In the meantime, as my colleague called out in this post: How to pass data/value from vue.js to builderio?

If you need this in the short term you should be able to use a combination of our our Web Components API and the Vue Web Component Wrapper to potentially accomplish this? Take a look and let us know if that helps!