Home App Docs Blog Github

Custom Components/Templates in Nuxt App

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.

  <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 v-else>
            url: $route.path,

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

// TODO: enter your public 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
    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,

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.

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).

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?

@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

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 ... />

I’ll take it. :slight_smile: