Skip to main content

add-new-layout-component-nuxt3-steps

tip

This section guides you through the process of activating classification by explaining each step. It takes longer to go through, but it will help you understand why each line of code is needed.

  1. Copy the file /components/Layout.vue to /components/HomeLayout.vue.

  2. Open the new file in a text editor.

  3. Make the following change:

    /components/HomeLayout.vue
    <script lang="ts" setup>
    import type { Content, Fields } from "../types";
    import Body from "./Body.vue";
    import Footer from "./Footer.vue";
    import variantsJson from "../content/home-variants.json";
    import { type PersonalizedVariant } from "@uniformdev/context";

    defineProps<{
    fields: Fields;
    content: Content;
    }>();
    const variants = variantsJson as PersonalizedVariant[];
    </script>

    <template>
    <div class="container">
    <Head>
    <Title>{{ fields.title }}</Title>
    <link rel="icon" href="/favicon.ico" />
    </Head>
    <Body :fields="fields" :content="content" />
    <Footer />
    </div>
    </template>
    About this step

    This makes the variant data available to the component.

  4. Make the following change:

    /components/HomeLayout.vue
    <script lang="ts" setup>
    import type { Content, Fields } from "../types";
    import Body from "./Body.vue";
    import Footer from "./Footer.vue";
    import variantsJson from "../content/home-variants.json";
    import { type PersonalizedVariant } from "@uniformdev/context";
    import { Personalize } from "@uniformdev/context-vue";

    defineProps<{
    fields: Fields;
    content: Content;
    }>();
    const variants = variantsJson as PersonalizedVariant[];
    </script>

    <template>
    <div class="container">
    <Head>
    <Title>{{ fields.title }}</Title>
    <link rel="icon" href="/favicon.ico" />
    </Head>
    <Personalize
    :variations="variants"
    name="bodyPersonalized"
    :component="(Body as any)"
    />
    <Footer />
    </div>
    </template>
    About this step

    This adds the personalization component, which is responsible for determining which variant's data to use.