Home App Docs Blog Github

How can I create custom component with Nuxt/VueJS

I’m trying to create a custom component on a nuxt project.
I was able to register it and I can saw it in the insert menu however nothing is displayed when I add it on a page !

Here’s my source code :
pages/_page.vue

<template>
  <div v-if="notFound">
    <!-- Show your 404 content -->
    Page not found
  </div>
  <div v-else>
    <RenderContent
      :key="$route.path"
      model="page"
      :options="{
        url: $route.path,
      }"
      @contentLoaded="contentLoaded"
      @contentError="contentError"
    />
  </div>
</template>

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

import HelloWorld from '~/components/HelloWorld'

builder.init('XXXXXXXXXXXXXXXXXXXXXXXXXXXXX')

Builder.registerComponent(HelloWorld, {
  name: 'HelloWorld',
  inputs: [
    {
      name: 'name',
      type: 'string',
      defaultValue: 'World',
    },
  ],
})

export default Vue.extend({
  components: { RenderContent },
  data: () => ({
    notFound: false,
  }),
  watch: {},
  methods: {
    contentLoaded(content) {
      if (!content) {
        if (this.$nuxt.context.ssrContext) {
          this.$nuxt.context.ssrContext.res.statusCode = 404
        }
        this.notFound = true
      }
    },
    contentError(err) {
      // TODO: Handle error
      console.log(err)
    },
  },
})
</script>

components/HelloWorld.vue

<template>
  <h1>Hello {{ name }}</h1>
</template>

<script>
export default {
  props: {
    name: { type: String, default: 'World' },
  },
}
</script>
1 Like

I am also interested in learning more about this. Improving the Vue/Nuxt documentation would definitely be a big plus, in my opinion.

Yes, I’m not sure builderio is the right solution if you plan to develop with Nuxt.
I’m just doing some first tests with this kind of solutions but it seems builderio won’t fit my needs.

Did you try https://www.storyblok.com/ ?
It seems to be really similar to builderio but they focus on nuxt.
However their visual builder is not well designed !!

I hope this is not the case. And I really hope someone can offer an answer to the OP’s question, because Nuxt is absolutely positioned as a supported stack for Builder.io

Hey @somecallmejosh @pmerienne - we absolutely support Nuxt. At the moment though, we do not support registering custom Vue components. This is coming soon though. If you would like to try out the alpha Vue SDK that supports this let me know and I may be able to get it to you early

1 Like

@steve, I would definitey like to try it!!!

Vue is actually supported but only with the native builder.io components. Storyblok isn’t comparable to builder.io as it contains only a CMS and doesn’t give the opportunity to edit styling and UI. Moreover, Stupidly expensive!

I hope builder extend their features in the next period.

Hey Steve - do you have a time frame on the Vue SDK for custom components in the builder?
This is a feature we’re looking for also.

Is there a public roadmap for Builder.io?

Thanks!

Hoping to have a v2 Vue SDK (supporting custom components) ready next week - I will post here when available, would love feedback @alex_symphonic !

Hey all - I’ve published a beta version of our Vue SDK 2.0 that supports custom components

You can see an example of using it here, would highly value feedback on it!