EDU-133: Vue and Nuxt Gen 2 - Custom components - Child blocks (all 3 examples)

packages/sdks-tests/src/snippet-tests/advanced-child.spec.ts

@@ -10,6 +10,8 @@ test.describe('Advanced child sub components', () => {
         'angular-16-ssr',
         'gen1-remix',
         'gen1-react',
+        'vue',
+        'nuxt',
         'svelte',
         'sveltekit',
         'qwik-city',
@@ -44,6 +46,8 @@ test.describe('Advanced child sub components', () => {
         'angular-16-ssr',
         'gen1-remix',
         'gen1-react',
+        'vue',
+        'nuxt',
         'svelte',
         'sveltekit',
         'qwik-city',

packages/sdks-tests/src/snippet-tests/custom-child.spec.ts

@@ -10,6 +10,8 @@ test.describe('Div with Hero class, and text', () => {
         'angular-16-ssr',
         'gen1-remix',
         'gen1-react',
+        'vue',
+        'nuxt',
         'svelte',
         'sveltekit',
         'qwik-city',
@@ -29,6 +31,8 @@ test.describe('Div with Hero class, and text', () => {
         'angular-16-ssr',
         'gen1-remix',
         'gen1-react',
+        'vue',
+        'nuxt',
         'svelte',
         'sveltekit',
         'qwik-city',

packages/sdks-tests/src/snippet-tests/editable-regions.spec.ts

@@ -7,7 +7,9 @@ test.describe('Editable regions in custom components', () => {
     packageName,
   }) => {
     test.skip(
-      !['react', 'angular-16', 'angular-16-ssr', 'svelte', 'sveltekit'].includes(packageName)
+      !['react', 'angular-16', 'angular-16-ssr', 'vue', 'nuxt', 'svelte', 'sveltekit'].includes(
+        packageName
+      )
     );
 
     await page.goto('/editable-region');
@@ -31,10 +33,12 @@ test.describe('Editable regions in custom components', () => {
         'angular-16-ssr',
         'gen1-remix',
         'gen1-react',
-        'svelte',
-        'sveltekit',
+        'vue',
+        'nuxt',
         'qwik-city',
         'hydrogen',
+        'svelte',
+        'sveltekit',
       ].includes(packageName)
     );
 

packages/sdks/snippets/nuxt/components/CustomColumns.vue

@@ -0,0 +1,24 @@
+<template>
+    <!-- Left Column -->
+      <Blocks
+        :parent="builderBlock.id"
+        :path="'column1'"
+        :blocks="column1"
+      />
+    <!-- Right Column -->
+      <Blocks
+        :parent="builderBlock.id"
+        :path="'column2'"
+        :blocks="column2"
+      />
+  </template>
+
+  <script setup lang="ts">
+  import { Blocks, type BuilderBlock } from '@builder.io/sdk-vue';
+
+  const { column1, column2, builderBlock } = defineProps<{
+    column1: BuilderBlock[];
+    column2: BuilderBlock[];
+    builderBlock: BuilderBlock;
+  }>();
+  </script>

packages/sdks/snippets/nuxt/components/CustomColumnsInfo.ts

@@ -0,0 +1,25 @@
+import type { RegisteredComponent } from '@builder.io/sdk-vue';
+import CustomColumns from './CustomColumns.vue';
+
+export const CustomColumnsInfo: RegisteredComponent = {
+  component: CustomColumns,
+  name: 'MyColumns', // you can define your custom name for the component
+  inputs: [
+    {
+      name: 'column1',
+      type: 'uiBlocks',
+      defaultValue: [],
+    },
+    {
+      name: 'column2',
+      type: 'uiBlocks',
+      defaultValue: [],
+    },
+  ],
+
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+  },
+};
+
+export default CustomColumnsInfo;

packages/sdks/snippets/nuxt/components/CustomHero.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>This is text from your component</div>
+  <!-- The slot will render any child blocks from Builder -->
+  <slot />
+</template>

packages/sdks/snippets/nuxt/components/CustomHeroInfo.ts

@@ -0,0 +1,21 @@
+import type { RegisteredComponent } from '@builder.io/sdk-vue';
+import CustomHero from './CustomHero.vue';
+
+const CustomHeroInfo: RegisteredComponent = {
+  component: CustomHero,
+  name: 'CustomHero',
+  canHaveChildren: true,
+  defaultChildren: [
+    {
+      '@type': '@builder.io/sdk:Element',
+      component: {
+        name: 'Text',
+        options: {
+          text: 'This is Builder text',
+        },
+      },
+    },
+  ],
+};
+
+export default CustomHeroInfo;

packages/sdks/snippets/nuxt/components/CustomTabs.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="dynamics-slots" v-if="tabList.length">
+      <button
+        v-for="(tab, index) in tabList"
+        :key="index"
+        :class="{ 'active': activeTab === index }"
+        @click="activeTab = index"
+      >
+        {{ tab.tabName }}
+      </button>
+
+      <Blocks
+        :blocks="tabList[activeTab].blocks"
+        :path="`tabList.${activeTab}.blocks`"
+        :parent="builderBlock.id"
+      />
+    </div>
+  </template>
+
+  <script setup lang="ts">
+  import { ref, defineProps } from 'vue';
+  import { Blocks, type BuilderBlock } from '@builder.io/sdk-vue';
+
+  const activeTab = ref(0);
+
+  const { builderBlock, tabList } = defineProps<{
+    builderBlock: BuilderBlock,
+    tabList: Array<{
+      tabName: string;
+      blocks: BuilderBlock[];
+    }>
+  }>();
+
+  </script>
+
+

packages/sdks/snippets/nuxt/components/CustomTabsInfo.ts

@@ -0,0 +1,29 @@
+import type { RegisteredComponent } from '@builder.io/sdk-vue';
+import CustomTabs from './CustomTabs.vue';
+
+export const CustomTabsInfo: RegisteredComponent = {
+  component: CustomTabs,
+  name: 'TabFields',
+  inputs: [
+    {
+      name: 'tabList',
+      type: 'list',
+      subFields: [
+        {
+          name: 'tabName',
+          type: 'string',
+        },
+        {
+          name: 'blocks',
+          type: 'uiBlocks',
+          defaultValue: [],
+        },
+      ],
+    },
+  ],
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+  },
+};
+
+export default CustomTabsInfo;

packages/sdks/snippets/nuxt/pages/advanced-child.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+  import { Content, fetchOneEntry, isPreviewing } from '@builder.io/sdk-vue';
+  import CustomTabsInfo from '../components/CustomTabsInfo';
+  import { useRoute } from 'nuxt/app';
+
+  const route = useRoute();
+  const model = 'advanced-child';
+  const apiKey = 'ee9f13b4981e489a9a1209887695ef2b';
+
+  const { data: content, pending } = await useAsyncData(
+    `builder-${model}-${route.path}`,
+    () => fetchOneEntry({
+      model,
+      apiKey,
+      userAttributes: {
+          urlPath: route.path,
+        },
+      })
+    );
+    </script>
+
+<template>
+  <div>
+    <div v-if="pending">Loading...</div>
+    <div v-else-if="!content && !isPreviewing()">404 - Not Found</div>
+    <Content
+      v-else
+      :content="content"
+      :model="model"
+      :apiKey="apiKey"
+      :customComponents="[CustomTabsInfo]"
+    />
+  </div>
+</template>
+

packages/sdks/snippets/nuxt/pages/custom-child.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { fetchOneEntry, Content, isPreviewing } from '@builder.io/sdk-vue';
+import CustomHeroInfo from '../components/CustomHeroInfo';
+import { useRoute } from 'nuxt/app';
+
+const route = useRoute();
+const model = 'custom-child';
+const apiKey = 'ee9f13b4981e489a9a1209887695ef2b';
+
+const { data: content, pending } = await useAsyncData(
+  `builder-${model}-${route.path}`,
+  () => fetchOneEntry({
+    model,
+    apiKey,
+    userAttributes: {
+        urlPath: route.path,
+      },
+    })
+);  
+</script>
+
+<template>
+  <div v-if="pending">Loading...</div>
+  <div v-else-if="!content && !isPreviewing()">404 - Not Found</div>
+  <Content
+    v-else
+    :content="content"
+    :model="model"
+    :apiKey="apiKey"
+    :customComponents="[CustomHeroInfo]"
+    />
+</template>
+

packages/sdks/snippets/nuxt/pages/editable-region.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+      <div v-if="pending">Loading...</div>
+      <div v-else-if="!content && !isPreviewing()">404 - Not Found</div>
+      <Content
+        v-else
+        :content="content"
+        :model="model"
+        :apiKey="apikey"
+        :customComponents="[CustomColumnsInfo]"
+      />
+    </div>
+  </template>
+
+  <script setup lang="ts">
+  import { Content, fetchOneEntry, isPreviewing } from '@builder.io/sdk-vue';
+  import CustomColumnsInfo from '../components/CustomColumnsInfo';
+  import { useRoute } from 'nuxt/app';
+
+  const route = useRoute();
+  const model = 'editable-regions';
+  const apiKey = 'ee9f13b4981e489a9a1209887695ef2b';
+
+const { data: content, pending } = await useAsyncData(
+  `builder-${model}-${route.path}`,
+  () => fetchOneEntry({
+    model,
+    apiKey,
+    userAttributes: {urlPath: route.path},
+    })
+  );
+
+  </script>
+

packages/sdks/snippets/vue/src/components/custom-components/custom-columns/CustomColumns.vue

@@ -0,0 +1,24 @@
+<template>
+  <!-- Left Column -->
+    <Blocks
+      :parent="builderBlock.id"
+      :path="'column1'"
+      :blocks="column1"
+    />
+  <!-- Right Column -->
+    <Blocks
+      :parent="builderBlock.id"
+      :path="'column2'"
+      :blocks="column2"
+    />
+</template>
+
+<script setup lang="ts">
+import { Blocks, type BuilderBlock } from '@builder.io/sdk-vue';
+
+const { column1, column2, builderBlock } = defineProps<{
+  column1: BuilderBlock[];
+  column2: BuilderBlock[];
+  builderBlock: BuilderBlock;
+}>();
+</script>

packages/sdks/snippets/vue/src/components/custom-components/custom-columns/CustomColumnsInfo.ts

@@ -0,0 +1,25 @@
+import CustomColumns from '@/components/custom-components/custom-columns/CustomColumns.vue';
+import type { RegisteredComponent } from '@builder.io/sdk-vue';
+
+export const CustomColumnsInfo: RegisteredComponent = {
+  component: CustomColumns,
+  name: 'MyColumns', // you can define your custom name for the component
+  inputs: [
+    {
+      name: 'column1',
+      type: 'uiBlocks',
+      defaultValue: [],
+    },
+    {
+      name: 'column2',
+      type: 'uiBlocks',
+      defaultValue: [],
+    },
+  ],
+
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+  },
+};
+
+export default CustomColumnsInfo;

packages/sdks/snippets/vue/src/components/custom-components/custom-hero/CustomHero.vue

@@ -0,0 +1,8 @@
+<template>
+  <section>
+    <div>This is text from your component</div>
+    <!-- The slot will render any child blocks from Builder -->
+    <slot />
+  </section>
+</template>
+

packages/sdks/snippets/vue/src/components/custom-components/custom-hero/CustomHeroInfo.ts

@@ -0,0 +1,21 @@
+import CustomHero from '@/components/custom-components/custom-hero/CustomHero.vue';
+import type { RegisteredComponent } from '@builder.io/sdk-vue';
+
+const customHeroInfo: RegisteredComponent = {
+  component: CustomHero,
+  name: 'CustomHero',
+  canHaveChildren: true,
+  defaultChildren: [
+    {
+      '@type': '@builder.io/sdk:Element',
+      component: {
+        name: 'Text',
+        options: {
+          text: 'This is Builder text',
+        },
+      },
+    },
+  ],
+};
+
+export default customHeroInfo;