Register custom components with Nuxt/VueJS

Feature Requests
1

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
2

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

3

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 !!

4

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

5

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
6

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

7

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.

8

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!

9

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

10

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!

11

Hello everyone! We are taking note of the high interest in registering custom components in Vue JS. For now, you can share your interest and follow the development progress for this feature at Allow registration of Vue JS custom components | Ideas. Thank you!

12

Using Child Blocks in Custom Components
Is VUE not currently supported? Request VUE to also support this feature