Skip to main content

add-new-layout-component-nuxt3-complete

tip

This section gets you to activating classification as quickly as possible. It does not explain each line of code.

Add the following file:

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