Custom Components/Templates in Nuxt App

Technical Questions CMS
1

Hello, I am looking to use Builder within a Nuxt/Vue App. I am able to connect to my models, capture & display model data, etc. My templates/symbols are displaying as expected. I am using Segment for page load and click event data capturing on other “static” pages within my site. I am trying to figure out if it is possible to pass click event data from Builder.io to my Nuxt application.

<template>
  <div class="bg-lt-grey-25">
    <div class="container mx-auto bg-white shadow-lg">
      <div v-if="notFound">
        <!-- Show your 404 content -->
        Page not found
      </div>
      <div v-else>
        <RenderContent
          :key="$route.path"
          model="landing-page"
          @contentLoaded="contentLoaded"
          @contentError="contentError"
          :options="{
            url: $route.path,
          }"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { builder, RenderContent } from '@builder.io/vue'
import Vue from 'vue'

// TODO: enter your public API key
builder.init(process.env.BUILDER_API_KEY)

export default Vue.extend({
  data: () => ({
    notFound: false,
    meta: {},
  }),
  components: { RenderContent },
  methods: {
    contentLoaded(content) {
      if (!content) {
        if (this.$nuxt.context.ssrContext) {
          this.$nuxt.context.ssrContext.res.statusCode = 404
        }
        this.notFound = true
      }
      this.meta = {
        metaCanonicalUrL: content.data.metaCanonicalUrL,
        metaDescription: content.data.metaDescription,
        metaNoindex: content.data.metaNoindex,
        metaPageTitle: content.data.metaPageTitle,
      }
    },
    contentError(err) {
      // Handle error
    },
    // IS THIS POSSIBLE?
    buttoClick() {
      alert('a button from Bilder.io was clicked in builder.')
    },
  },
  head() {
    return {
      title: this.meta.metaPageTitle,
      link: [{ rel: 'canonical', href: this.meta.metaCanonicalUrL }],
      meta: [
        {
          hid: 'robots',
          name: 'robots',
          content: this.meta.metaNoindex === 'true' ? 'noindex' : '',
        },
        {
          hid: 'og:url',
          property: 'og:url',
          content: this.meta.metaCanonicalUrL,
        },
        {
          hid: 'og:title',
          property: 'og:title',
          content: this.meta.metaPageTitle,
        },
        {
          hid: 'description',
          name: 'description',
          content: this.meta.metaDescription,
        },
        {
          hid: 'og:description',
          name: 'og:description',
          content: this.meta.metaDescription,
        },
      ],
    }
  },
})
</script>

Regarding my buttonClick() method above… what’s the best practice in a Nuxt/Vue environment for dealing with click events in a Builder.io template or symbol? I appreciate any help or advice. Thank you.

2

Hi @somecallmejosh :wave: Thanks for reaching out!

To pass click event data in Builder you can use data bindings (in the data tab in the editor).

3

Hi @maddy, thanks for your reply. Can that be passed down as a prop in the <RenderContent> component? I’m trying to figure out how to communicate this click to my Nuxt app? Am I thinking of this the wrong way, perhaps?

4

@somecallmejosh you can try using an event handler with capture mode:

<RenderContent ... @click.capture="onClick" />

  methods: {
    ...,
    onClick(event) {
      if (event.target.tagName === "A") {
        // DO THIS
      }
    }
  }
5

Hi @markpinero - Thanks for the lead. I gave this a try, and binding the click handler to the <RenderContent> component doesn’t seem to work. But, placing it on a parent wrapper seems to do the trick.

<div @click="onClick">
  <RenderContent ... />
</div>

I’ll take it. :slight_smile: